.ud,
.udH,
.udB {
   --ud-kirmizi : var(--kirmizi, #C0142E);
   --ud-tas     : var(--tas, #E4E2DD);
   --ud-zemin   : #0b0b0c;
   --ud-cizgi   : rgba(228, 226, 221, .14);
   --ud-soluk   : rgba(228, 226, 221, .52);
}

/* ---------------- sahne zemini ---------------- */
.ud {
   position: relative;
   background: var(--ud-zemin);
   color: var(--ud-tas);
   padding: 132px 0 76px;
   overflow: hidden;
}

.ud__perde {
   position: absolute;
   inset: 0;
   pointer-events: none;
   background:
      radial-gradient(120% 80% at 78% 34%, rgba(192, 20, 46, .16) 0%, rgba(192, 20, 46, 0) 62%),
      linear-gradient(180deg, rgba(255, 255, 255, .05) 0%, rgba(255, 255, 255, 0) 38%);
}

.ud__in { position: relative; z-index: 1; }

/* ---------------- kategori sekmeleri ---------------- */
.ud__sekme {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin-bottom: 26px;
}

.ud__sekme a {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 9px 18px;
   border: 1px solid var(--ud-cizgi);
   border-radius: 999px;
   font-size: 11px;
   letter-spacing: .09em;
   text-transform: uppercase;
   color: var(--ud-soluk);
   text-decoration: none;
   background: rgba(255, 255, 255, .03);
   transition: color .25s, border-color .25s, background .25s;
}

.ud__sekme a:hover { color: var(--ud-tas); border-color: rgba(228, 226, 221, .34); }

.ud__sekme a.is-secili {
   color: var(--ud-tas);
   border-color: rgba(192, 20, 46, .55);
   background: rgba(192, 20, 46, .12);
}

.ud__sekme a.is-secili::before {
   content: "";
   width: 6px; height: 6px;
   border-radius: 50%;
   background: var(--ud-kirmizi);
   box-shadow: 0 0 10px rgba(192, 20, 46, .9);
}

/* ---------------- kırıntı yolu ---------------- */
.ud__yol {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 10px;
   font-size: 11px;
   letter-spacing: .08em;
   text-transform: uppercase;
   color: var(--ud-soluk);
   margin-bottom: 22px;
}

.ud__yol a { color: var(--ud-soluk); text-decoration: none; transition: color .2s; }
.ud__yol a:hover { color: var(--ud-tas); }
.ud__yol span { color: var(--ud-tas); }
.ud__yol i { width: 14px; height: 1px; background: rgba(228, 226, 221, .3); display: inline-block; }

/* ---------------- ana ızgara ---------------- */
.ud__grid {
   display: grid;
   grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
   grid-template-rows: auto 1fr;
   column-gap: 56px;
   row-gap: 34px;
   align-items: start;
}

.ud__sahne { grid-column: 1; grid-row: 1 / span 2; position: sticky; top: 108px; }
.ud__bas   { grid-column: 2; grid-row: 1; }
.ud__kunye { grid-column: 2; grid-row: 2; }

/* ---------------- başlık ---------------- */
.ud__ad {
   font-family: "Bodoni Moda", Georgia, serif;
   font-weight: 400;
   font-size: clamp(38px, 5.2vw, 74px);
   line-height: .98;
   letter-spacing: -.015em;
   margin: 0;
}

.ud__kod {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   margin: 18px 0 0;
   padding: 8px 16px 8px 12px;
   border: 1px solid var(--ud-cizgi);
   border-radius: 999px;
   font-size: 11px;
   letter-spacing: .12em;
   text-transform: uppercase;
   color: var(--ud-soluk);
   background: rgba(255, 255, 255, .03);
}

.ud__kod i {
   width: 6px; height: 6px;
   border-radius: 50%;
   background: var(--ud-kirmizi);
   box-shadow: 0 0 10px rgba(192, 20, 46, .9);
}

.ud__kod b { color: var(--ud-tas); font-weight: 500; letter-spacing: .06em; }

/* ---------------- görsel ---------------- */

.ud__foto {
   position: relative;
   margin: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 620px;
   padding: 10px;
}

.ud__halo {
   position: absolute;
   left: 50%; top: 50%;
   transform: translate(-50%, -50%);
   width: 78%;
   aspect-ratio: 1 / 1;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(192, 20, 46, .34) 0%, rgba(192, 20, 46, .08) 46%, rgba(192, 20, 46, 0) 70%);
   filter: blur(14px);
   pointer-events: none;
}

.ud__foto img {
   position: relative;
   max-width: 100%;
   max-height: 660px;
   width: auto;
   object-fit: contain;
   cursor: zoom-in;
   transition: opacity .28s ease;
   filter: drop-shadow(0 34px 44px rgba(0, 0, 0, .62));
}

.ud__ok {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   width: 44px; height: 44px;
   display: grid;
   place-items: center;
   border: 1px solid var(--ud-cizgi);
   border-radius: 50%;
   background: rgba(255, 255, 255, .05);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
   color: var(--ud-tas);
   cursor: pointer;
   transition: border-color .25s, background .25s;
}

.ud__ok:hover { border-color: rgba(192, 20, 46, .6); background: rgba(192, 20, 46, .14); }
.ud__ok--geri  { left: 0; }
.ud__ok--ileri { right: 0; }
.ud__ok svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; }

/* küçük görsel şeridi */
.ud__serit {
   display: flex;
   gap: 10px;
   margin-top: 18px;
   overflow-x: auto;
   padding-bottom: 4px;
   scrollbar-width: none;
}
.ud__serit::-webkit-scrollbar { display: none; }

.ud__kare {
   flex: 0 0 auto;
   width: 74px; height: 74px;
   padding: 6px;
   border: 1px solid var(--ud-cizgi);
   border-radius: 10px;
   background: rgba(255, 255, 255, .03);
   cursor: pointer;
   transition: border-color .25s, background .25s;
}

.ud__kare img { width: 100%; height: 100%; object-fit: contain; }
.ud__kare:hover { border-color: rgba(228, 226, 221, .38); }
.ud__kare.is-secili {
   border-color: var(--ud-kirmizi);
   background: rgba(192, 20, 46, .1);
   box-shadow: 0 0 0 1px rgba(192, 20, 46, .35), 0 0 18px rgba(192, 20, 46, .25);
}

/* ---------------- künye ---------------- */
.ud__etiket {
   display: flex;
   align-items: center;
   gap: 10px;
   font-size: 11px;
   letter-spacing: .16em;
   text-transform: uppercase;
   color: var(--ud-soluk);
   margin: 0 0 16px;
}

.ud__etiket b {
   width: 22px; height: 1px;
   background: var(--ud-kirmizi);
   display: inline-block;
}

.ud__ozellik { list-style: none; margin: 0 0 34px; padding: 0; }

.ud__ozellik li {
   display: grid;
   grid-template-columns: 30px 1fr auto;
   align-items: baseline;
   gap: 14px;
   padding: 14px 0;
   border-top: 1px solid var(--ud-cizgi);
}

.ud__ozellik li:last-child { border-bottom: 1px solid var(--ud-cizgi); }

.ud__no { font-size: 10px; color: rgba(228, 226, 221, .34); letter-spacing: .08em; }

.ud__ozAd {
   font-size: 15px;
   line-height: 1.35;
   color: var(--ud-tas);
}

.ud__ozDeger {
   font-size: 12px;
   letter-spacing: .04em;
   color: var(--ud-soluk);
   text-align: right;
}

.ud__ozellik--tek .ud__ozAd { color: rgba(228, 226, 221, .82); }

/* fiyat */
.ud__fiyat {
   display: flex;
   align-items: baseline;
   gap: 14px;
   margin-bottom: 22px;
}

.ud__fiyat span {
   font-size: 10px;
   letter-spacing: .16em;
   text-transform: uppercase;
   color: var(--ud-soluk);
}

.ud__fiyat b {
   font-family: "Bodoni Moda", Georgia, serif;
   font-weight: 400;
   font-size: clamp(24px, 3vw, 34px);
   color: var(--ud-tas);
}

/* butonlar */
.ud__aksiyon { display: flex; flex-wrap: wrap; gap: 12px; }

.ud__cta {
   position: relative;
   display: inline-flex;
   align-items: center;
   gap: 12px;
   padding: 15px 26px;
   border: 1px solid rgba(192, 20, 46, .5);
   border-radius: 999px;
   background: rgba(192, 20, 46, .16);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   color: var(--ud-tas);
   font-family: "IBM Plex Mono", ui-monospace, monospace;
   font-size: 11px;
   letter-spacing: .13em;
   text-transform: uppercase;
   text-decoration: none;
   cursor: pointer;
   transition: background .3s, border-color .3s, box-shadow .3s;
}

.ud__cta svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; }

.ud__cta:hover {
   background: rgba(192, 20, 46, .3);
   border-color: rgba(192, 20, 46, .95);
   box-shadow: 0 0 0 1px rgba(192, 20, 46, .3), 0 0 26px rgba(192, 20, 46, .38);
}

.ud__cta--bos {
   background: rgba(255, 255, 255, .04);
   border-color: var(--ud-cizgi);
}

.ud__cta--bos:hover {
   background: rgba(255, 255, 255, .09);
   border-color: rgba(228, 226, 221, .4);
   box-shadow: none;
}

/* paylaş */
.ud__paylas {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 18px;
   margin-top: 28px;
   padding-top: 20px;
   border-top: 1px solid var(--ud-cizgi);
   font-size: 10px;
   letter-spacing: .14em;
   text-transform: uppercase;
}

.ud__paylas span { color: rgba(228, 226, 221, .34); }
.ud__paylas a { color: var(--ud-soluk); text-decoration: none; transition: color .2s; }
.ud__paylas a:hover { color: var(--ud-kirmizi); }

/* ---------------- hikâye ---------------- */
.udH {
   background: var(--ud-zemin);
   color: var(--ud-tas);
   padding: 20px 0 96px;
}

.udH__in {
   display: grid;
   grid-template-columns: 210px minmax(0, 1fr);
   gap: 48px;
   align-items: start;
}

.udH__yan { position: sticky; top: 120px; }

.udH__cizgi {
   display: block;
   width: 1px;
   height: 84px;
   margin-top: 14px;
   background: linear-gradient(180deg, rgba(192, 20, 46, .8), rgba(192, 20, 46, 0));
}

.udH__metin {
   max-width: 66ch;
   font-family: "Bodoni Moda", Georgia, serif;
   font-size: clamp(17px, 1.5vw, 20px);
   line-height: 1.72;
   color: rgba(228, 226, 221, .84);
}

.udH__metin p { margin: 0 0 1.2em; }
.udH__metin p:first-child { font-size: 1.14em; color: var(--ud-tas); }
.udH__metin img { max-width: 100%; height: auto; margin: 24px 0; }
.udH__metin a { color: var(--ud-kirmizi); }
.udH__metin h2, .udH__metin h3 {
   font-weight: 400;
   font-size: 1.28em;
   margin: 1.6em 0 .5em;
   color: var(--ud-tas);
}
.udH__metin ul, .udH__metin ol { padding-left: 1.2em; margin: 0 0 1.2em; }
.udH__metin li { margin-bottom: .5em; }

/* ---------------- benzer ürünler ---------------- */
.udB {
   background: var(--ud-zemin);
   color: var(--ud-tas);
   padding: 0 0 110px;
}

.udB__ust {
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 18px;
   padding-top: 44px;
   border-top: 1px solid var(--ud-cizgi);
   margin-bottom: 34px;
}

/* kayan ray */
.udB__ray { position: relative; }

.udB__ray .pgrid {
   display: flex;
   grid-template-columns: none;
   gap: 14px;
   overflow-x: auto;
   scroll-snap-type: x mandatory;
   -webkit-overflow-scrolling: touch;
   scrollbar-width: none;
   padding-bottom: 6px;
   scroll-padding-left: 0;
}

.udB__ray .pgrid::-webkit-scrollbar { display: none; }

.udB__ray .pgrid > .pcard {
   flex: 0 0 calc(25% - 10.5px);
   min-width: 0;
   scroll-snap-align: start;
}

.udB__nav { display: contents; }

.udB__ok {
   position: absolute;
   top: 42%;
   transform: translateY(-50%);
   width: 44px; height: 44px;
   display: grid;
   place-items: center;
   border: 1px solid var(--ud-cizgi);
   border-radius: 50%;
   background: rgba(14, 14, 16, .78);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
   color: var(--ud-tas);
   cursor: pointer;
   z-index: 3;
   transition: border-color .25s, background .25s, opacity .25s;
}

.udB__ok:hover { border-color: rgba(192, 20, 46, .7); background: rgba(192, 20, 46, .2); }
.udB__ok svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.udB__ok--geri  { left: -22px; }
.udB__ok--ileri { right: -22px; }

.udB__baslik {
   font-family: "Bodoni Moda", Georgia, serif;
   font-weight: 400;
   font-size: clamp(26px, 3.4vw, 40px);
   margin: 0;
}

/* ---------------- talep formu ---------------- */
.udF {
   position: fixed;
   inset: 0;
   z-index: 9000;
   display: grid;
   place-items: center;
   padding: 20px;
}

.udF[hidden] { display: none; }

.udF__perde {
   position: absolute;
   inset: 0;
   background: rgba(6, 6, 7, .82);
   backdrop-filter: blur(6px);
   -webkit-backdrop-filter: blur(6px);
}

.udF__panel {
   position: relative;
   width: min(560px, 100%);
   max-height: 90vh;
   overflow-y: auto;
   padding: 38px 36px 34px;
   border: 1px solid rgba(228, 226, 221, .16);
   border-radius: 18px;
   background: rgba(18, 18, 20, .92);
   box-shadow: 0 40px 90px rgba(0, 0, 0, .6), 0 0 0 1px rgba(192, 20, 46, .12);
   color: var(--tas, #E4E2DD);
   animation: udFGir .34s cubic-bezier(.2, .8, .25, 1);
}

@keyframes udFGir {
   from { opacity: 0; transform: translateY(18px); }
   to   { opacity: 1; transform: none; }
}

.udF__x {
   position: absolute;
   top: 16px; right: 16px;
   width: 36px; height: 36px;
   display: grid;
   place-items: center;
   border: 1px solid rgba(228, 226, 221, .16);
   border-radius: 50%;
   background: rgba(255, 255, 255, .04);
   color: inherit;
   cursor: pointer;
   transition: border-color .25s, background .25s;
   z-index: 2;
}

.udF__x:hover { border-color: rgba(192, 20, 46, .7); background: rgba(192, 20, 46, .16); }
.udF__x svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; }

.udF__baslik {
   font-family: "Bodoni Moda", Georgia, serif;
   font-weight: 400;
   font-size: clamp(24px, 3.6vw, 32px);
   line-height: 1.1;
   margin: 0 0 10px;
}

.udF__not {
   font-size: 13px;
   line-height: 1.6;
   color: rgba(228, 226, 221, .56);
   margin: 0 0 22px;
}

/* kilitli satırlar */
.udF__kilit {
   display: grid;
   gap: 1px;
   background: rgba(228, 226, 221, .12);
   border: 1px solid rgba(228, 226, 221, .12);
   border-radius: 12px;
   overflow: hidden;
   margin-bottom: 22px;
}

.udF__kilit > div {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   padding: 13px 16px;
   background: rgba(192, 20, 46, .08);
}

.udF__kilit span {
   font-size: 10px;
   letter-spacing: .14em;
   text-transform: uppercase;
   color: rgba(228, 226, 221, .48);
}

.udF__kilit b {
   font-weight: 500;
   font-size: 14px;
   text-align: right;
   color: var(--tas, #E4E2DD);
}

/* alanlar */
.udF__alan {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 14px;
   margin-bottom: 8px;
}

.udF__genis { grid-column: 1 / -1; }

.udF__alan label { display: flex; flex-direction: column; gap: 7px; }

.udF__alan span {
   font-size: 10px;
   letter-spacing: .14em;
   text-transform: uppercase;
   color: rgba(228, 226, 221, .48);
}

.udF__alan input,
.udF__alan textarea {
   width: 100%;
   padding: 12px 14px;
   border: 1px solid rgba(228, 226, 221, .16);
   border-radius: 10px;
   background: rgba(255, 255, 255, .04);
   color: var(--tas, #E4E2DD);
   font-family: inherit;
   font-size: 14px;
   resize: vertical;
   transition: border-color .25s, background .25s;
}

.udF__alan input::placeholder,
.udF__alan textarea::placeholder { color: rgba(228, 226, 221, .28); }

.udF__alan input:focus,
.udF__alan textarea:focus {
   outline: none;
   border-color: rgba(192, 20, 46, .7);
   background: rgba(192, 20, 46, .07);
}

.udF__uyari {
   font-size: 11px;
   letter-spacing: .06em;
   color: var(--ud-kirmizi, #C0142E);
   margin: 10px 0 0;
}

.udF__uyari[hidden] { display: none; }

.udF__gonder { width: 100%; justify-content: center; margin-top: 18px; }

/* ---------------- büyüteç ---------------- */
.udZ {
   position: fixed;
   inset: 0;
   z-index: 9500;
   display: grid;
   place-items: center;
   padding: 40px;
   background: rgba(6, 6, 7, .93);
   cursor: zoom-out;
}

.udZ[hidden] { display: none; }

.udZ__x {
   position: absolute;
   top: 20px; right: 20px;
   width: 42px; height: 42px;
   display: grid;
   place-items: center;
   border: 1px solid rgba(192, 20, 46, .55);
   border-radius: 50%;
   background: rgba(14, 14, 16, .95);
   color: var(--tas, #E4E2DD);
   cursor: pointer;
   z-index: 5;
   box-shadow: 0 0 22px rgba(192, 20, 46, .35);
   transition: background .25s, border-color .25s, transform .25s;
}

.udZ__x:hover { background: rgba(192, 20, 46, .3); border-color: rgba(192, 20, 46, 1); transform: rotate(90deg); }
.udZ__x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; }

.udZ__cerceve {
   position: relative;
   animation: udZGir .42s cubic-bezier(.2, .85, .28, 1);
   padding: 2px;
   border-radius: 16px;
   overflow: hidden;
   cursor: default;
   box-shadow: 0 0 60px rgba(192, 20, 46, .16);
   max-width: 100%;
   max-height: 100%;
}

/* yavasca donen lazer isik */
.udZ__lazer {
   position: absolute;
   left: 50%; top: 50%;
   width: 260%;
   aspect-ratio: 1 / 1;
   transform: translate(-50%, -50%);
   background: conic-gradient(
      from 0deg,
      rgba(192, 20, 46, 0)   0%,
      rgba(192, 20, 46, 0)  62%,
      rgba(192, 20, 46, .35) 74%,
      rgba(255, 106, 128, .9) 80%,
      rgba(192, 20, 46, .35) 86%,
      rgba(192, 20, 46, 0)  96%,
      rgba(192, 20, 46, 0) 100%);
   animation: udZDon 11s linear infinite;
   pointer-events: none;
}

/* cerceve ici: sabit koyu zemin */
.udZ__cerceve::after {
   content: "";
   position: absolute;
   inset: 2px;
   border-radius: 14px;
   border: 1px solid rgba(228, 226, 221, .1);
   pointer-events: none;
   z-index: 2;
}

.udZ__ic {
   position: relative;
   z-index: 1;
   border-radius: 14px;
   overflow: hidden;
   background: #0b0b0c;
   display: flex;
}

.udZ__ic img {
   display: block;
   max-width: calc(100vw - 84px);
   max-height: calc(100vh - 84px);
   width: auto;
   height: auto;
   object-fit: contain;
}

@keyframes udZDon {
   to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes udZGir {
   from { opacity: 0; transform: scale(.92) translateY(14px); }
   to   { opacity: 1; transform: none; }
}

/* ---------------- duyarlı ---------------- */
@media (max-width: 1240px) {
   .udB__ok--geri  { left: 4px; }
   .udB__ok--ileri { right: 4px; }
}

@media (max-width: 1040px) {
   .ud { padding-top: 108px; }
   .udB__ray .pgrid > .pcard { flex: 0 0 calc(33.333% - 9.4px); }

   .ud__grid {
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: auto;
      row-gap: 26px;
   }

   .ud__bas   { grid-column: 1; grid-row: auto; }
   .ud__sahne { grid-column: 1; grid-row: auto; position: static; }
   .ud__kunye { grid-column: 1; grid-row: auto; }

   .ud__foto { min-height: 400px; padding: 6px; }
   .ud__foto img { max-height: 460px; }

   .udH__in { grid-template-columns: minmax(0, 1fr); gap: 22px; }
   .udH__yan { position: static; }
   .udH__cizgi { display: none; }
}

@media (max-width: 760px) {
   /* mobilde ekranda tam 2 kart */
   .udB__ray .pgrid { gap: 12px; margin-right: -20px; padding-right: 20px; }
   .udB__ray .pgrid > .pcard { flex: 0 0 calc(50% - 6px); }

   /* oklar rayın altına iner */
   .udB__nav {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      margin-top: 16px;
   }
   .udB__ok {
      position: static;
      transform: none;
      width: 46px; height: 46px;
   }
   .udB__ok--geri, .udB__ok--ileri { left: auto; right: auto; }
}

@media (max-width: 640px) {
   .ud { padding: 96px 0 56px; }
   .ud__ad { font-size: clamp(32px, 10vw, 44px); }

   .ud__foto { min-height: 300px; }
   .ud__foto img { max-height: 340px; }

   .ud__ok { width: 38px; height: 38px; }
   .ud__ok--geri  { left: -6px; }
   .ud__ok--ileri { right: -6px; }

   .ud__kare { width: 62px; height: 62px; }

   .ud__ozellik li { grid-template-columns: 26px 1fr; row-gap: 4px; }
   .ud__ozDeger { grid-column: 2; text-align: left; }

   .ud__aksiyon { flex-direction: column; align-items: stretch; }
   .ud__cta { justify-content: center; }

   .udF { padding: 0; place-items: end stretch; }
   .udF__panel {
      width: 100%;
      max-height: 92vh;
      border-radius: 18px 18px 0 0;
      padding: 30px 22px 26px;
   }
   .udF__alan { grid-template-columns: 1fr; }

   .udH { padding-bottom: 64px; }
   .udB { padding-bottom: 72px; }
   .udZ__x { top: -14px; right: -10px; width: 38px; height: 38px; }
   .udZ { padding: 26px 14px 14px; }
   .udZ__ic img { max-width: calc(100vw - 36px); max-height: calc(100vh - 36px); }
}

@media (prefers-reduced-motion: reduce) {
   .udF__panel { animation: none; }
   .udZ__lazer { animation: none; opacity: .5; }
   .udZ__cerceve { animation: none; }
   .ud__foto img { transition: none; }
}