/* ==========================================================================
   By Asude Çabuk — tasarım sistemi
   Koyu siyah + altın. Mobil önce.
   ========================================================================== */

:root{
  --siyah:#050505;
  --zemin:#0b0a09;
  --kat:#131110;
  --kat-2:#1b1816;
  --cizgi:rgba(201,162,39,.22);
  --cizgi-soluk:rgba(255,255,255,.07);

  --altin:#c9a227;
  --altin-acik:#e6cd8b;
  --altin-koyu:#8a6d17;

  --krem:#f2ece1;
  --metin:#cfc7ba;
  /* Fotoğraflı zemin üzerinde okunabilir kalması için açıldı (AA: 7,3:1). */
  --metin-soluk:#a49b8e;

  --ust:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --govde:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;

  --en:1180px;
  --r:2px;
  --gecis:.5s cubic-bezier(.22,.61,.36,1);
  /* Bölüm boşluğu. 132 px iken iki bölüm arasında 264 px'lik bomboş şerit
     kalıyordu — laptopta ekranın üçte biri. Nefes payı duruyor, ölçülen
     fazlalık kesildi. */
  --ust-bosluk:clamp(54px,8vw,94px);
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  /* Üst çubuk her genişlikte 67px ve sabit. Çapa bağlantısı bölüm etiketini
     onun ALTINDA bırakıyordu (ölçüldü: 390px'te etiket 63.2px, çubuk alt kenarı
     67px). Bölüm dolgusuyla telafi etmek işe yaramıyor, o dolgu clamp ile
     daralıyor. scroll-padding hem çapaya hem klavye odağına uygulanır. */
  scroll-padding-top:84px;
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

body{
  margin:0;
  background:var(--siyah);
  color:var(--metin);
  font-family:var(--govde);
  font-size:16px;
  line-height:1.7;
  font-weight:300;
  letter-spacing:.01em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
/* Mobil menü tam ekranken arkadaki sayfa kayıyordu (ölçüldü: menü açıkken
   scrollBy(0,500) → y 0'dan 500'e gitti); menü kapanınca kullanıcı bambaşka
   bir yerde buluyordu kendini. body'de yalnız overflow-x kilitliydi. */
body.menu-acik{overflow:hidden}

img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--altin);color:#0a0908}

/* ---------------------------------------------------------------- zemin katmanı */
.zemin{
  position:fixed;inset:0;z-index:-2;
  background:#050505 center top/cover no-repeat;
  background-image:url('../medya/zemin-mobil.jpg?v=4');
}
.zemin::after{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(130% 70% at 50% 0%,rgba(0,0,0,0),rgba(0,0,0,.34) 75%),
    linear-gradient(180deg,rgba(5,5,5,.12),rgba(5,5,5,.42));
}
@media (min-width:900px){
  .zemin{background-image:url('../medya/zemin-masaustu.jpg?v=4')}
}

/* ---------------------------------------------------------------- düzen */
.sar{width:100%;max-width:var(--en);margin-inline:auto;padding-inline:22px}
@media (min-width:720px){.sar{padding-inline:40px}}

section{position:relative;padding-block:var(--ust-bosluk)}

/* Okuma perdesi: her içerik bölümü kendi ince perdesinin üstünde duruyor.
   Perde bölümün üst ve alt kenarında eriyor, böylece fotoğraf bölümler
   arasında kesintisiz görünüyor.

   İKİ ŞEY YASAK, ikisi de kullanıcı tarafından ayrı ayrı reddedildi:
   1. Perdeyi koyulaştırmak (.88 denendi → "çok koyu siyah tabaka koymuşsun")
   2. `backdrop-filter` bulanıklığı (7-9px denendi → "arkaplanı görmemi
      engelleyen blurlamayı kaldır")
   Zemin fotoğrafı NET ve GÖRÜNÜR kalacak. Kontrast, yazının kendi rengi ve
   gölgesiyle sağlanıyor — zemine dokunularak değil. */
section:not(.kahraman)::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(5,5,5,0)    0%,
    rgba(5,5,5,.42)  7%,
    rgba(5,5,5,.50) 50%,
    rgba(5,5,5,.42) 93%,
    rgba(5,5,5,0)  100%);
}
@media (min-width:900px){
  section:not(.kahraman)::before{
    background:linear-gradient(180deg,
      rgba(5,5,5,0)    0%,
      rgba(5,5,5,.32)  7%,
      rgba(5,5,5,.40) 50%,
      rgba(5,5,5,.32) 93%,
      rgba(5,5,5,0)  100%);
  }
}
/* Perde açık ve bulanıklık yok; kontrastı tamamen yazı taşıyor.
   İki katmanlı gölge: sıkı olan (2px) harf kenarını zeminden ayırıyor,
   geniş olan (22px) yazının ardında yumuşak bir karanlık ada kuruyor.
   Gölge yalnızca harfin çevresinde olduğu için fotoğraf net kalıyor —
   bir perdenin yapamayacağı şey bu. */
section:not(.kahraman) h2,
section:not(.kahraman) h3,
section:not(.kahraman) .girisi,
section:not(.kahraman) .etiket{
  text-shadow:0 1px 2px rgba(0,0,0,.92), 0 2px 22px rgba(0,0,0,.8);
}

/* ---------------------------------------------------------------- tipografi */
h1,h2,h3,h4{
  font-family:var(--ust);
  color:var(--krem);
  font-weight:400;
  line-height:1.14;
  letter-spacing:.005em;
  margin:0;
}
h2{font-size:clamp(2rem,6.4vw,3.6rem)}
h3{font-size:clamp(1.3rem,3.4vw,1.75rem)}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}

.etiket{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.68rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--altin);font-weight:400;
  margin-bottom:20px;
}
.etiket::before{content:'';width:34px;height:1px;background:linear-gradient(90deg,transparent,var(--altin))}

.girisi{
  font-size:clamp(1rem,2.4vw,1.12rem);
  /* Bölüm girişleri, panel arkası olmadan doğrudan fotoğrafın üstünde duran tek
     gövde metni. Perde bilerek açık tutulduğu için kontrastı yazı taşıyor:
     ölçümde #b8b0a3 mobilde 3,73:1'de kalıyordu, --metin ile 4,7:1'e çıkıyor.
     --metin-soluk kartların İÇİNDE kaldığı için değiştirilmedi. */
  color:var(--metin);
  max-width:56ch;
  margin-top:22px;
}
/* Mobil zemin görseli masaüstündekinden parlak (yazı altında L 0,128 / 0,079),
   aynı renkle kontrast 3,52:1'e düşüyordu. Zemine dokunmak yasak olduğu için
   fark yazıdan kapatılıyor: 4,6:1 (AA). Yalnızca mobil — masaüstü zaten geçiyor. */
@media (max-width:899px){ .girisi{color:#eae3d7} }

.altin{color:var(--altin-acik)}
.serif{font-family:var(--ust)}

/* ---------------------------------------------------------------- düğmeler */
.dg{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  padding:16px 34px;border-radius:var(--r);
  font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;font-weight:400;
  transition:var(--gecis);position:relative;overflow:hidden;
  border:1px solid var(--altin);
  color:#0a0806;background:linear-gradient(135deg,var(--altin-acik),var(--altin));
  min-height:52px;
}
.dg:hover{filter:brightness(1.12);transform:translateY(-2px)}
.dg:active{transform:translateY(0)}
.dg-bos{background:none;color:var(--altin-acik);border-color:var(--cizgi)}
.dg-bos:hover{border-color:var(--altin);background:rgba(201,162,39,.07);filter:none}
.dg-kucuk{padding:11px 20px;min-height:42px;font-size:.66rem;letter-spacing:.16em}

:focus-visible{outline:2px solid var(--altin-acik);outline-offset:3px}

/* ---------------------------------------------------------------- üst çubuk */
.ust-cubuk{
  position:fixed;top:0;left:0;right:0;z-index:60;
  transition:background .4s,backdrop-filter .4s,border-color .4s;
  border-bottom:1px solid transparent;
}
.ust-cubuk.katı{
  background:rgba(6,5,5,.86);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--cizgi-soluk);
}
.ust-ic{display:flex;align-items:center;justify-content:space-between;height:66px;gap:16px}
.logo{font-family:var(--ust);font-size:1.22rem;color:var(--krem);letter-spacing:.06em;line-height:1;white-space:nowrap}
.logo small{display:block;font-family:var(--govde);font-size:.52rem;letter-spacing:.4em;color:var(--altin);text-transform:uppercase;margin-top:5px}

/* 7 bağlantı sığmalı: sabit 30px 1024'te taşırıyor, gap ekranla daralır */
.menu{display:none;gap:clamp(12px,2vw,30px);align-items:center}
.menu a{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--metin-soluk);transition:color .3s;position:relative;padding-block:6px}
.menu a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--altin);transition:width .35s}
.menu a:hover{color:var(--krem)}
.menu a:hover::after{width:100%}
@media (min-width:980px){.menu{display:flex}}

.ust-dg{display:none}
@media (min-width:980px){.ust-dg{display:inline-flex}}

.menu-dg{display:flex;flex-direction:column;gap:5px;padding:12px;margin-right:-12px}
.menu-dg span{width:24px;height:1px;background:var(--krem);transition:var(--gecis)}
@media (min-width:980px){.menu-dg{display:none}}
.menu-acik .menu-dg span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-acik .menu-dg span:nth-child(2){opacity:0}
.menu-acik .menu-dg span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.mobil-menu{
  position:fixed;inset:66px 0 0;z-index:55;
  background:rgba(5,4,4,.97);backdrop-filter:blur(20px);
  display:flex;flex-direction:column;justify-content:center;gap:6px;
  padding:0 30px 70px;
  opacity:0;visibility:hidden;transform:translateY(-12px);
  transition:var(--gecis);
}
.menu-acik .mobil-menu{opacity:1;visibility:visible;transform:none}
.mobil-menu a{
  font-family:var(--ust);font-size:1.85rem;color:var(--krem);
  padding:13px 0;border-bottom:1px solid var(--cizgi-soluk);
}
.mobil-menu .dg{margin-top:28px}
@media (min-width:980px){.mobil-menu{display:none}}

/* ---------------------------------------------------------------- kahraman */
.kahraman{
  position:relative;
  /* Kaydırma yolu. 340vh iken filmin 13,3 sn'si 240vh'ye yayılıyordu; ölçümde
     yazı bittikten sonra 2198 px'lik tek parça ölü şerit çıktı — sayfadaki en
     büyük boşluk. 260vh'de aynı film 160vh'ye sığıyor, yazı zamanlamaları
     oransal olduğu için kendiliğinden uyuyor. */
  height:260vh;
  padding:0;
  margin-bottom:0;
}
.kahraman-yapisik{
  position:sticky;top:0;
  /* iOS Safari'de svh, tarayıcı çubuğunun en büyük hâlini varsayıp gerçek görünür
     alandan kısa kalıyor ve altta boşluk bırakıyordu. lvh her zaman doldurur. */
  height:100vh;height:100lvh;min-height:560px;
  overflow:hidden;
  display:grid;
  place-items:center;
}
.kahraman-video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  will-change:contents;
}
/* Geniş ekranda dikey videonun yanlarını dolduran bulanık aynı-kare katmanı */
.kahraman-fon{display:none}
.kahraman-perde{
  position:absolute;inset:0;z-index:2;
  background:
    linear-gradient(180deg,rgba(4,4,4,.72) 0%,rgba(4,4,4,.18) 26%,rgba(4,4,4,.2) 58%,rgba(4,4,4,.92) 100%),
    radial-gradient(80% 55% at 50% 50%,transparent 40%,rgba(0,0,0,.6));
  pointer-events:none;
}

/* kaydırmayla gelen yazı panelleri */
.kahraman-yazilar{position:absolute;inset:0;pointer-events:none;z-index:3}
.kh{
  position:absolute;left:0;right:0;
  padding-inline:24px;
  opacity:0;
  transition:opacity .6s ease,transform .8s cubic-bezier(.22,.61,.36,1);
  will-change:opacity,transform;
}
.kh-in{opacity:1!important;transform:none!important}
/* opacity:0 elemanı odak sırasından ÇIKARMAZ: kahraman bölümündeki görünmez
   "Randevu Al" bağlantısı 8. Tab'da odak alıyor, klavye kullanıcısı odağı
   kaybediyordu. visibility odak sırasını da keser; .kh-in gelince geri gelir. */
.kh:not(.kh-in) a,.kh:not(.kh-in) button{visibility:hidden}

.kh-1{top:50%;transform:translateY(-46%);text-align:center}
.kh-2{top:26%;transform:translateX(-42px);text-align:left}
.kh-3{top:26%;transform:translateX(42px);text-align:right}
.kh-4{bottom:16%;transform:translateY(34px);text-align:center}

@media (min-width:720px){
  .kh{padding-inline:min(9vw,110px)}
  .kh-2,.kh-3{top:30%;max-width:52%}
  .kh-3{margin-left:auto}
}

/* Geniş ekranda video dikey; tamamı görünsün diye contain, yazılar yanlara geçer */
@media (min-width:900px){
  .kahraman-video{object-fit:contain}
  .kahraman-fon{
    display:block;
    position:absolute;inset:-8%;
    width:116%;height:116%;
    object-fit:cover;object-position:center;
    filter:blur(56px) saturate(1.25) brightness(.62);
    transform:scale(1.06);
    will-change:contents;
  }
  /* videonun kenarlarını bulanık katmana yumuşakça bağla */
  .kahraman-yapisik::after{
    content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
    background:linear-gradient(90deg,
      rgba(5,5,5,.72) 0%, rgba(5,5,5,.30) 14%, rgba(5,5,5,0) 30%,
      rgba(5,5,5,0) 70%, rgba(5,5,5,.30) 86%, rgba(5,5,5,.72) 100%);
  }
  .kahraman-yazilar{
    --serit:min(100vw,calc(100lvh * .5625));
    --yan:calc((100vw - var(--serit)) / 2);
  }
  .kh-2,.kh-3{
    top:26%;max-width:none;
    width:max(240px,calc(var(--yan) - 28px));
    padding-inline:34px;
  }
  .kh-2{right:auto;left:0}
  .kh-3{left:auto;right:0;margin-left:0}
  .kh-2 .kh-metin,.kh-3 .kh-metin{max-width:none}
}

.kh-marka{
  font-family:var(--ust);
  font-size:clamp(2.6rem,12vw,6.4rem);
  color:var(--krem);line-height:.98;letter-spacing:.01em;
  text-shadow:0 6px 40px rgba(0,0,0,.75);
}
.kh-marka em{display:block;font-style:normal;font-size:.34em;letter-spacing:.44em;color:var(--altin);text-transform:uppercase;margin-bottom:18px}
.kh-alt{
  margin-top:22px;font-size:.76rem;letter-spacing:.3em;text-transform:uppercase;color:var(--metin-soluk);
}
.kh-baslik{
  font-family:var(--ust);font-size:clamp(1.7rem,6.4vw,3.1rem);color:var(--krem);line-height:1.1;
  text-shadow:0 4px 30px rgba(0,0,0,.8);
}
.kh-metin{
  margin-top:16px;font-size:clamp(.92rem,2.6vw,1.05rem);color:var(--metin);max-width:36ch;
  text-shadow:0 2px 18px rgba(0,0,0,.9);
}
.kh-3 .kh-metin{margin-left:auto}

.kaydir{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:9px;
  font-size:.58rem;letter-spacing:.32em;text-transform:uppercase;color:var(--metin-soluk);
  transition:opacity .5s;
}
.kaydir i{display:block;width:1px;height:42px;background:linear-gradient(180deg,var(--altin),transparent);animation:kay 2.2s ease-in-out infinite}
@keyframes kay{0%,100%{opacity:.25;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}

/* ---------------------------------------------------------------- görünürlük animasyonu */
.gel{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s cubic-bezier(.22,.61,.36,1)}
.gel.ic{opacity:1;transform:none}
.gel[data-gecikme="1"]{transition-delay:.09s}
.gel[data-gecikme="2"]{transition-delay:.18s}
.gel[data-gecikme="3"]{transition-delay:.27s}
.gel[data-gecikme="4"]{transition-delay:.36s}
.gel[data-gecikme="5"]{transition-delay:.45s}

/* ---------------------------------------------------------------- ayrıcalık kartları */
.izgara{display:grid;gap:2px;margin-top:52px}
@media (min-width:640px){.izgara{grid-template-columns:1fr 1fr}}
@media (min-width:980px){.izgara{grid-template-columns:repeat(3,1fr)}}

.kart{
  background:linear-gradient(160deg,rgba(24,21,19,.78),rgba(11,10,9,.78));
  border:1px solid var(--cizgi-soluk);
  padding:38px 30px 42px;
  transition:var(--gecis);position:relative;overflow:hidden;
}
.kart::before{
  content:'';position:absolute;top:0;left:0;width:100%;height:1px;
  background:linear-gradient(90deg,transparent,var(--altin),transparent);
  transform:scaleX(0);transition:transform .6s;
}
.kart:hover{background:linear-gradient(160deg,rgba(32,27,22,.85),rgba(14,12,11,.85));border-color:var(--cizgi)}
.kart:hover::before{transform:scaleX(1)}
.kart-no{font-family:var(--ust);font-size:2.1rem;color:var(--altin-koyu);line-height:1;display:block;margin-bottom:18px}
.kart h3{margin-bottom:12px}
.kart p{font-size:.93rem;color:var(--metin-soluk);margin:0}

/* ---------------------------------------------------------------- hizmetler */
.hizmetler{display:grid;gap:2px;margin-top:52px}
@media (min-width:820px){.hizmetler{grid-template-columns:1fr 1fr}}

.hizmet{
  border:1px solid var(--cizgi-soluk);
  background:rgba(11,10,9,.74);
  padding:32px 28px;
  display:flex;flex-direction:column;gap:12px;
  transition:var(--gecis);
}
.hizmet:hover{background:rgba(24,21,19,.88);border-color:var(--cizgi)}
.hizmet-ust{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.hizmet h3{font-size:clamp(1.16rem,3vw,1.42rem)}
.hizmet-sure{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--altin-koyu);white-space:nowrap}
.hizmet p{font-size:.93rem;color:var(--metin-soluk);margin:0}
.hizmet-detay{font-size:.88rem;color:var(--metin-soluk);opacity:.82;border-top:1px solid var(--cizgi-soluk);padding-top:14px;margin-top:2px}
.hizmet-al{margin-top:auto;padding-top:16px}
.hizmet-al a{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--altin);display:inline-flex;gap:9px;align-items:center;transition:gap .3s}
.hizmet-al a:hover{gap:16px}
.rozet{
  display:inline-block;font-size:.56rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--altin);border:1px solid var(--cizgi);padding:3px 9px;border-radius:99px;
  vertical-align:middle;margin-left:10px;
}

/* ---------------------------------------------------------------- tırnak aynası */
/* İki parça: solda sahne, sağda kumanda kolonu (künye · şekil · süzgeç+şerit ·
   çağrı satırı). Kartela önce tam genişlikteydi; kullanıcı sağ kolondaki
   boşluğu "ölü alan" diye gösterince (2026-08-31 ekran görüntüsü) bütün
   seçiciler kolona taşındı — ürün yapılandırıcısı düzeni. */
.ayna{
  /* Sahnenin genişliği tek yerde: hem kolon genişliği hem de sahnenin
     max-width'i buradan okunuyor. Kolon `auto` bırakılınca sahne yüzdeli
     genişlikte olduğu için izlek min-content'e (2 px) çöküyordu. */
  --ayna-en:calc(46vh * 1696 / 2528);
  --ayna-en:calc(46svh * 1696 / 2528);
  margin-top:clamp(30px,5vw,54px);display:grid;gap:clamp(20px,3.4vw,34px);
  /* minmax(0,…): yatay kaydırılan şeridin min-content genişliği kolonu
     şişirip sayfayı yana taşırıyordu. */
  grid-template-columns:minmax(0,1fr);align-items:start;
}
.ayna-yan{min-width:0}
@media (min-width:900px){
  .ayna{
    --ayna-en:calc(64vh * 1696 / 2528);
    --ayna-en:calc(64svh * 1696 / 2528);
    grid-template-columns:var(--ayna-en) minmax(0,1fr);
    column-gap:clamp(34px,4.4vw,64px);row-gap:clamp(30px,3.6vw,46px);
    align-items:center;
  }
  /* Kolonları ayıran saç teli. Kutu çizmeden iki sütunu birbirine bağlıyor;
     bölüm "üst üste yığılmış öğeler" değil düzenlenmiş bir sayfa gibi duruyor.
     stretch şart: kolon içerik boyunda kalınca çizgi sahnenin ortasında
     asılı kısa bir çubuğa dönüyordu. */
  .ayna-yan{
    align-self:stretch;justify-content:center;
    border-left:1px solid var(--cizgi-soluk);padding-left:clamp(28px,3.6vw,52px);
  }
  /* Sayaç satırın en sağına yapışınca addan kopuyordu; künye kendi
     ölçüsünde kalıyor, kolonun kalanı boşluk. */
  .ayna-kunye{max-width:460px}
}

/* Sahne oranı ana kareyle aynı (1696×2528 ≈ 2:3). Sabitlenmezse kare
   değişiminde yükseklik oynar ve sayfa altındaki her şey zıplar.
   Yükseklik ekrana bağlı: genişlik kolonu doldurunca kare telefonda 520 px'i
   geçiyordu; büyük görsel ekrandan çıkmadan alttaki karelere ulaşılamıyor,
   yani karşılaştırma — bölümün tek işi — yapılamıyordu. Oran sabit olduğu
   için yükseklik sınırı, oranın tersinden genişlik sınırı olarak veriliyor. */
/* Çerçeve: 20 px yuvarlak köşe fotoğrafı bir uygulama kartına benzetiyordu.
   Sergilenen bir baskı gibi dursun diye köşe neredeyse düz, kenarlık altın
   saç teli, altında derin ve yayvan bir gölge var; ayrıca içeride 10 px
   içeriden ikinci bir hat — klasik paspartu. */
/* Kartela — iki seçim adımı ALT ALTA tek blokta (kullanıcının isteği,
   2026-08-31: "tırnak şekli ve modeller alt alta olsun kolay seçilir olsun").
   Üstteki saç teli, seçicileri sahne+künye çiftinden ayırıp "burası kumanda"
   diyor; adım numaraları iki eksenin sırasını söylüyor: önce el, sonra tasarım. */
.ayna-kartela{
  display:flex;flex-direction:column;gap:clamp(22px,3vw,30px);min-width:0;
  padding-top:clamp(20px,2.6vw,28px);border-top:1px solid var(--cizgi-soluk);
}
.ayna-tasarim{display:flex;flex-direction:column;gap:14px;min-width:0}
.ayna-adim{
  display:flex;align-items:center;gap:10px;
  font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--metin-soluk);
}
.ayna-adim b{
  flex:0 0 auto;width:21px;height:21px;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--cizgi);color:var(--altin-acik);
  font-weight:400;font-size:.64rem;letter-spacing:0;
}
.ayna-sekil{display:flex;flex-direction:column;gap:14px}
/* Şerit taşırması .sar kenar boşluğunu AŞAMAZ: mobilde .sar 22px iken 26px
   taşırma sayfaya 4px yatay kaydırma veriyordu (canlıda ölçüldü, dw=394/iw=390). */
.ayna{--tasir:22px}
@media (min-width:720px){.ayna{--tasir:26px}}
/* Yatay kaydırma: yedi şekil dar ekranda alt satıra kırılınca "tablo" hissi
   dağılıyor, kaydırılan tek şerit ise tırnakçının şekil kartelasına benziyor. */
.ayna-sekiller{
  display:flex;gap:clamp(8px,1.3vw,14px);overflow-x:auto;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
  /* Kaydırma ipucu: maskenin solma bölgesi padding'e denk gelir; scrollLeft=0'da
     ilk kart TAM+opak, kayan içerik kenarda eriyerek biter. Negatif margin
     dış hizalamayı korur, simetrik padding seridiOrtala formülünde sadeleşir. */
  padding:0 var(--tasir) 2px;margin-inline:calc(-1 * var(--tasir));
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--tasir),#000 calc(100% - var(--tasir)),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 var(--tasir),#000 calc(100% - var(--tasir)),transparent 100%);
}
.ayna-sekiller::-webkit-scrollbar{display:none}
/* Kartela kartı: kuyumcu vitrinindeki numune gibi. Dolgu YOK — fotoğraf
   kartın kendisi; altın tel çerçeve ve serif etiket dışında hiçbir süs yok. */
.ayna-sekiller button{
  flex:1 1 0;min-width:76px;max-width:106px;position:relative;display:block;padding:0;
  border:1px solid var(--cizgi-soluk);border-radius:var(--r);
  background:var(--kat);color:var(--metin-soluk);cursor:pointer;
  font-family:inherit;overflow:hidden;isolation:isolate;
  transition:color var(--gecis),border-color var(--gecis),transform var(--gecis);
}
/* 100×150 ölçüldü: kadraj artık şekiller arasında EN ÇOK değişen bölge
   (orta parmak ucu + koyu flu zemin; piksel farkıyla bulundu, üreteç
   /tmp/sekil_kucuk.py). 88×124'lük ilk kadraj tırnağın gövdesini
   gösteriyordu ve kullanıcı haklı olarak "tırnağın şekli gözükmüyor" dedi —
   fark uçta, gövdede değil. */
.ayna-sekiller img{
  width:100%;height:auto;aspect-ratio:2/3;display:block;object-fit:cover;
  /* Seçilmemiş kart soluk ama OKUNUR kalmalı: brightness .88'de tırnak ucu
     karta karışıyordu ve yedi kart aynı ten lekesi gibi duruyordu (ölçüldü). */
  filter:saturate(.72) contrast(1.05) brightness(.97);
  transition:filter var(--gecis),transform var(--gecis);
}
/* Fotoğrafın alt kenarı kartın siyahına eriyor; etiket kesik bir şeridin
   üstünde değil, görüntünün devamında duruyor. Yükseklik %58 iken tırnağın
   yarısını yutuyordu — şekil tam da orada okunuyor. */
.ayna-sekiller button::before{
  content:"";position:absolute;inset:auto 0 0;height:44%;z-index:1;pointer-events:none;
  background:linear-gradient(to top,var(--kat) 16%,rgba(19,17,16,.78) 52%,transparent);
}
.ayna-sekiller span{
  position:absolute;inset:auto 0 0;z-index:2;padding:0 6px 9px;
  /* .82rem/.11em nowrap etiketleri kırpıyordu (YUVARLA / KARE OVA / RUS BADE —
     ölçüldü: +11..+21px taşma). .68rem/.04em'de yayındaki 8 ad da sığıyor;
     sarma izni sınır durumlar için sigorta — isimde üç nokta ASLA olmaz. */
  font-family:var(--ust);font-size:.68rem;line-height:1.2;letter-spacing:.04em;
  text-transform:uppercase;white-space:normal;
}
.ayna-sekiller button:hover{color:var(--krem);border-color:var(--cizgi)}
.ayna-sekiller button:hover img{filter:saturate(.8) contrast(1.04) brightness(1)}

.ayna-sekiller button[aria-pressed="true"]{
  color:var(--altin-acik);border-color:var(--altin);
}
.ayna-sekiller button[aria-pressed="true"] img{
  filter:saturate(1) contrast(1.06) brightness(1.06);
}
/* Seçiliyi ayıran şey renk değil ışık: altın tel çerçevenin içinde ikinci bir
   hat. Gölge/parıltı denendi, siyah zeminde is gibi duruyor. */
.ayna-sekiller button[aria-pressed="true"]::after{
  content:"";position:absolute;inset:3px;z-index:3;pointer-events:none;
  border:1px solid rgba(230,205,139,.34);
}
@media (prefers-reduced-motion:reduce){
  .ayna-sekiller button,.ayna-sekiller img{transition:none}
}

.ayna-sol{width:100%;max-width:var(--ayna-en);margin-inline:auto;min-width:0}
.ayna-sahne{
  position:relative;aspect-ratio:1696/2528;overflow:hidden;border-radius:3px;
  border:1px solid rgba(201,162,39,.26);background:#070707;
  box-shadow:0 42px 90px -34px rgba(0,0,0,.9);
  width:100%;max-width:100%;
}
.ayna-sahne::after{
  content:'';position:absolute;inset:10px;z-index:5;pointer-events:none;
  border:1px solid rgba(230,205,139,.13);
}
.ayna-kat{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .42s ease;
}
.ayna-kat.acik{opacity:1}

/* Sahne seçili tasarımı TAM gösterir. Kare ortadan bölünüp solda bir önceki
   tasarımın durduğu düzen kaldırıldı: kullanıcı yarısı bir tasarım yarısı başka
   tasarım olan kareyi istemedi. Kırpma yok, üst katman kareyi baştan sona kaplar. */

/* Geçişte tırnakların üstünden geçen altın ışık. Sahnenin dışında beklediği
   için normalde görünmez; sınıf eklenince bir kez soldan sağa süpürür. */
.ayna-isik{
  position:absolute;inset:0;pointer-events:none;opacity:0;z-index:3;
  background:linear-gradient(105deg,
    transparent 38%, rgba(230,205,139,.42) 50%, transparent 62%);
  transform:translateX(-60%);
}
.ayna-isik.sup{animation:aynaSupur .62s ease-out}
@keyframes aynaSupur{
  0%  {opacity:0;   transform:translateX(-60%)}
  35% {opacity:1}
  100%{opacity:0;   transform:translateX(60%)}
}

.ayna-yan{display:flex;flex-direction:column;gap:clamp(18px,2.8vw,26px)}

/* ---- künye: kategori + sayaç aynı satırda, altında ad ---- */
.ayna-kunye{display:flex;flex-direction:column;gap:10px}
.ayna-ust{
  margin:0;display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding-bottom:10px;border-bottom:1px solid var(--cizgi-soluk);
  font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--metin-soluk);
}
/* Sayaç bölümün "seçilmiş bir koleksiyon" olduğunu tek başına anlatıyor:
   kareleri ızgarada saymak yerine burada okunuyor. */
.ayna-sayac{flex:0 0 auto;display:inline-flex;align-items:baseline;gap:5px;font-style:normal}
.ayna-sayac b{font-weight:400;color:var(--altin-acik);font-variant-numeric:tabular-nums}
.ayna-sayac i{font-style:normal;color:var(--cizgi)}
.ayna-sayac span{font-variant-numeric:tabular-nums}
.ayna-ad{
  margin:0;font-family:var(--ust);font-size:clamp(1.7rem,4.4vw,2.6rem);
  line-height:1.12;color:var(--krem);
}

/* ---- filtre: dolu hap değil, alt çizgili metin ----
   Dolgu renkli haplar bölümü bir oyun arayüzüne çeviriyordu. Editoryal
   galerilerde süzgeç bir bağlantı gibi durur; seçili olan altın bir hatla
   işaretlenir. Dar ekranda tek sıra kalıp yana kayar. */
.ayna-filtre{
  display:flex;gap:clamp(16px,3vw,28px);overflow-x:auto;scrollbar-width:none;
  padding-bottom:2px;overscroll-behavior-x:contain;
}
.ayna-filtre::-webkit-scrollbar{display:none}
@media (min-width:900px){ .ayna-filtre{flex-wrap:wrap;row-gap:10px;overflow:visible} }
.ayna-filtre button{
  flex:0 0 auto;position:relative;padding:0 0 7px;background:none;border:0;
  font-size:.61rem;letter-spacing:.2em;text-transform:uppercase;color:var(--metin-soluk);
  transition:color var(--gecis);
}
.ayna-filtre button::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--altin);transform:scaleX(0);transform-origin:left;
  transition:transform var(--gecis);
}
.ayna-filtre button:hover{color:var(--krem)}
.ayna-filtre button[aria-pressed="true"]{color:var(--altin-acik)}
.ayna-filtre button[aria-pressed="true"]::after{transform:scaleX(1)}

/* ---- şerit: her ekranda TEK sıra ----
   Çok satırlı küçük kare duvarı bir çıkartma sayfası gibi görünüyordu ve
   kareler 58 px'e düşünce zaten ayırt edilmiyordu. Tek sıra hem daha büyük
   kare veriyor hem de "sıralı bir koleksiyon" hissi kuruyor; kalabalık
   duygusu oklar ve sayaçla yönetiliyor. */
.ayna-serit{display:flex;align-items:center;gap:12px;min-width:0}
.ayna-ok{
  flex:0 0 auto;display:none;width:34px;height:34px;place-items:center;
  border:1px solid var(--cizgi-soluk);border-radius:50%;color:var(--metin-soluk);
  transition:var(--gecis);
  /* Şeridin negatif margin'i içeriği okların altına uzatıyor; oklar üstte kalır. */
  position:relative;z-index:2;
}
.ayna-ok svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.3}
.ayna-ok:hover{color:var(--altin);border-color:var(--altin)}
@media (min-width:900px){ .ayna-ok{display:grid} }

.ayna-secim{
  /* position: seçili kareyi ortalarken offsetLeft'in şeride göre ölçülmesi
     gerekiyor; konumlanmış ata yoksa değer sayfaya göre çıkıyor. */
  position:relative;
  /* Kare boyu: 80 px'te TAM GENİŞLİKTE 11 tanesi görünüyordu ve şerit bir
     "seçenek duvarına" dönüyordu (Rolex 4, Apple 3 ölçümü). Şerit artık dar
     sağ kolonda (v46): eski 8vw burada yalnız 4 kare gösteriyordu — göz
     gezdirmek için az. 6.6vw ≈ 95 px kolonda ~5 kare gösteriyor; hem pahalı
     his korunuyor hem seçenekler görünür kalıyor. */
  display:grid;grid-auto-flow:column;grid-auto-columns:clamp(80px,6.6vw,100px);
  gap:clamp(10px,1.4vw,16px);
  /* Maskenin solma bölgesi padding'e denk gelir: scrollLeft=0'da ilk kare
     artık soluk/yarım değil, tam ve opak. Negatif margin dış hizayı korur. */
  min-width:0;padding:8px var(--tasir) 12px;margin-inline:calc(-1 * var(--tasir));
  overflow-x:auto;overflow-y:hidden;
  overscroll-behavior-x:contain;scroll-snap-type:x proximity;
  scrollbar-width:none;
  /* Şeridin iki ucu eriyerek bitiyor: sert kesik "taşmış içerik" gibi
     duruyordu, erime devamı olduğunu gösteriyor. */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--tasir),#000 calc(100% - var(--tasir)),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 var(--tasir),#000 calc(100% - var(--tasir)),transparent 100%);
}
.ayna-secim::-webkit-scrollbar{display:none}
/* Seçili olmayan kareler saydamlıkla değil renk sönümüyle geriye alınıyor.
   opacity kullanılınca arka plan fotoğrafı karenin içinden geçiyor ve tasarım
   okunmaz hâle geliyordu; kareler kendi zeminleri üzerinde net kalmalı. */
.ayna-nokta{
  position:relative;aspect-ratio:3/4;border-radius:2px;overflow:hidden;
  background:#0d0d0d;border:1px solid transparent;
  filter:saturate(.72) brightness(.78);transition:var(--gecis);
  scroll-snap-align:center;
}
.ayna-nokta img{width:100%;height:100%;object-fit:cover;display:block}
.ayna-nokta:hover{filter:none}
/* Seçim yalnızca "kenarlık var / kenarlık yok" ikilisiyle gösteriliyor.
   Ölçüldü (Rolex, Apple, Warby Parker): premium yapılandırıcıların hiçbirinde
   seçili öğe büyümüyor, kalkmıyor ya da gölge almıyor — kaldırma hareketi
   şeridi tekrar "buton" gibi gösteriyordu. */
.ayna-nokta.secili{filter:none;border-color:var(--altin)}
.ayna-nokta[hidden]{display:none}

.ayna-alt{display:flex;flex-wrap:wrap;align-items:center;gap:14px 34px}
.ayna-fiyat{
  /* justify-self: ızgara çocuğu olarak esniyor ve altındaki hat metnin
     bittiği yerde değil kolonun sonunda bitiyordu. */
  align-self:start;justify-self:start;display:inline-flex;align-items:center;gap:12px;
  padding-bottom:9px;border-bottom:1px solid rgba(201,162,39,.45);
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--altin-acik);
  transition:var(--gecis);
}
.ayna-fiyat svg{
  width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.2;
  transition:transform var(--gecis);
}
.ayna-fiyat:hover{color:var(--krem);border-bottom-color:var(--krem)}
.ayna-fiyat:hover svg{transform:translateX(5px)}

/* Katalog sayfasına köprü. Süzgeçlerin hemen altında ve onlarla aynı ölçekte:
   ayrı bir eylem değil, süzgecin devamı gibi okunsun. */
.ayna-tumu{
  display:inline-flex;align-items:center;gap:9px;margin-top:16px;
  font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--metin-soluk);min-height:44px;
  transition:color var(--gecis);
}
.ayna-tumu b{
  font-weight:400;color:var(--altin-acik);font-size:.58rem;
  border:1px solid var(--cizgi);border-radius:2px;padding:2px 7px;
}
.ayna-tumu svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.3;
  transition:transform var(--gecis)}
.ayna-tumu:hover{color:var(--altin-acik)}
.ayna-tumu:hover svg{transform:translateX(4px)}

@media (prefers-reduced-motion:reduce){
  .ayna-tumu svg{transition:none}
  .ayna-kat{transition:none}
  .ayna-isik.sup{animation:none}
  .ayna-fiyat svg,.ayna-filtre button::after{transition:none}
}

/* ---- MOBİL: bölüm yeniden TEK EKRANA sığıyor (2026-09-03) ----
   Kullanıcı: "mobilde burası hiç kullanışlı gözükmüyor".
   Canlıda ölçüldü (375×812): kullanılabilir yükseklik
   812 − 67 (üst çubuk) − 71 (alt çubuk) = 674 px. Bölüm ise
   sahne 374 + künye 68 + kartela 437 = 879 px yer istiyordu → 205 px taşma.
   Taşan kısım tam da tasarım şeridiydi; yani bölümün TEK İŞİ olan
   karşılaştırma mobilde hiç yapılamıyordu.

   Sebep tek bir değişiklik: 2026-08-31'de eklenen "1 · Tırnak şeklini seçin"
   adımı 161 px getirdi ve 2026-08-30'da ölçülerek kurulan tek-ekran dengesi
   sessizce bozuldu. Şekil adımı kullanıcının isteğiydi, KALDIRILAMAZ.

   Çözüm yapısal değil ölçüsel: hiçbir bölüm/özellik kaldırılmadı, yalnızca
   mobilde ölçüler kısıldı. Sahne en büyük payı verdi (46svh → 36svh) çünkü
   sahne teyit ekranı; karşılaştırma şeritte yapılıyor. Şerit karesi 70 px'in
   ALTINA indirilmedi — 58 px'te kareler birbirinden ayırt edilemiyor (ölçüldü).
   Masaüstü (≥900px) düzenine hiç dokunulmadı. */
@media (max-width:899px){
  /* Izgara boşluğu da mobilde kısılıyor: sahne ile kumanda arasındaki
     clamp(20px,3.4vw,34px) tek başına 20px yiyordu. */
  .ayna{--ayna-en:calc(33vh * 1696 / 2528);--ayna-en:calc(33svh * 1696 / 2528);gap:12px}
  .ayna-yan{gap:10px}

  .ayna-kunye{gap:4px}
  .ayna-ust{padding-bottom:7px;font-size:.56rem;letter-spacing:.2em}
  .ayna-ad{font-size:clamp(1.3rem,5.6vw,1.72rem)}

  .ayna-kartela{padding-top:12px;gap:12px}
  .ayna-sekil,.ayna-tasarim{gap:9px}
  .ayna-adim{font-size:.61rem;letter-spacing:.2em}
  .ayna-adim b{width:18px;height:18px;font-size:.56rem}

  /* Şekil kartı set-once bir kontrol: küçülmeyi en çok o kaldırır.
     Etiket sarmayı sürdürüyor — isimde üç nokta ASLA olmaz. */
  .ayna-sekiller{gap:8px}
  .ayna-sekiller button{min-width:50px;max-width:70px}
  .ayna-sekiller span{font-size:.58rem;padding:0 5px 6px;letter-spacing:.03em}

  .ayna-filtre{gap:15px;padding-bottom:1px}
  .ayna-filtre button{font-size:.57rem;padding-bottom:6px}

  .ayna-secim{
    grid-auto-columns:70px;gap:9px;
    padding:5px var(--tasir) 6px;
  }
}

/* ---------------------------------------------------------------- süreç */
.surec{margin-top:56px;display:grid;gap:0}
.adim{
  display:grid;grid-template-columns:auto 1fr;gap:22px;
  padding:26px 0;border-top:1px solid var(--cizgi-soluk);
}
.adim:last-child{border-bottom:1px solid var(--cizgi-soluk)}
.adim-no{
  font-family:var(--ust);font-size:1.5rem;color:var(--altin);line-height:1;
  width:52px;padding-top:4px;
}
.adim h3{font-size:1.16rem;margin-bottom:7px}
.adim p{font-size:.93rem;color:var(--metin-soluk);margin:0}
@media (min-width:720px){
  .adim{grid-template-columns:auto 1.1fr 1.6fr;align-items:baseline;gap:34px}
  .adim h3{margin-bottom:0}
}

/* ---------------------------------------------------------------- bölge */
.ilceler{display:flex;flex-wrap:wrap;gap:8px;margin-top:34px}
.ilceler span{
  padding:9px 17px;border:1px solid var(--cizgi-soluk);border-radius:99px;
  font-size:.74rem;letter-spacing:.08em;color:var(--metin-soluk);
  transition:var(--gecis);
}
.ilceler span:hover{border-color:var(--cizgi);color:var(--krem)}

/* ---------------------------------------------------------------- SSS */
.sss{margin-top:48px;border-top:1px solid var(--cizgi-soluk)}
.sss details{border-bottom:1px solid var(--cizgi-soluk)}
.sss summary{
  list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;
  font-family:var(--ust);font-size:clamp(1.06rem,3vw,1.3rem);color:var(--krem);
  transition:color .3s;
}
.sss summary::-webkit-details-marker{display:none}
.sss summary:hover{color:var(--altin-acik)}
.sss summary::after{
  content:'';position:absolute;right:6px;top:50%;
  width:11px;height:11px;border-right:1px solid var(--altin);border-bottom:1px solid var(--altin);
  transform:translateY(-70%) rotate(45deg);transition:transform .35s;
}
.sss details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.sss-cvp{padding:0 0 26px;font-size:.95rem;color:var(--metin-soluk);max-width:74ch}

/* ---------------------------------------------------------------- form */
.form-kabuk{
  margin-top:52px;
  border:1px solid var(--cizgi);
  background:linear-gradient(165deg,rgba(26,22,19,.86),rgba(9,8,7,.92));
  padding:34px 24px 38px;
}
@media (min-width:820px){.form-kabuk{padding:48px 52px 52px}}

.adimlar{display:flex;gap:0;margin-bottom:34px;border-bottom:1px solid var(--cizgi-soluk)}
.adimlar div{
  flex:1;padding-bottom:14px;position:relative;
  font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--metin-soluk);
  transition:color .4s;text-align:center;
}
.adimlar div::after{content:'';position:absolute;left:0;bottom:-1px;width:100%;height:1px;background:var(--altin);transform:scaleX(0);transition:transform .5s;transform-origin:left}
.adimlar div.etkin{color:var(--altin)}
.adimlar div.etkin::after,.adimlar div.bitti::after{transform:scaleX(1)}
.adimlar div.bitti{color:var(--metin)}

.sahne{display:none}
.sahne.acik{display:block;animation:sahnegel .5s cubic-bezier(.22,.61,.36,1)}
@keyframes sahnegel{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.alanlar{display:grid;gap:18px}
@media (min-width:680px){.alanlar.iki{grid-template-columns:1fr 1fr}}

label.al{display:block}
label.al > span{
  display:block;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--metin-soluk);margin-bottom:9px;
}
.al input,.al select,.al textarea{
  width:100%;padding:14px 15px;
  background:rgba(0,0,0,.42);border:1px solid var(--cizgi-soluk);border-radius:var(--r);
  color:var(--krem);font-family:var(--govde);font-size:1rem;font-weight:300;
  transition:border-color .3s,background .3s;
  -webkit-appearance:none;appearance:none;
}
.al textarea{min-height:110px;resize:vertical;line-height:1.6}
.al select{
  background-image:linear-gradient(45deg,transparent 50%,var(--altin) 50%),linear-gradient(135deg,var(--altin) 50%,transparent 50%);
  background-position:calc(100% - 20px) 22px,calc(100% - 14px) 22px;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
  padding-right:44px;
}
.al select option{background:#12100f;color:var(--krem)}
.al input:focus,.al select:focus,.al textarea:focus{outline:none;border-color:var(--altin);background:rgba(0,0,0,.62)}
.al input::placeholder,.al textarea::placeholder{color:#5d564e}
.al.yanlis input,.al.yanlis select,.al.yanlis textarea{border-color:#a5453a}
.al-hata{display:block;color:#d98079;font-size:.76rem;margin-top:7px;min-height:0}

.secim{display:grid;gap:8px}
@media (min-width:620px){.secim{grid-template-columns:1fr 1fr}}
.secim input{position:absolute;opacity:0;width:0;height:0}
.secim label{
  display:block;padding:16px 18px;cursor:pointer;
  border:1px solid var(--cizgi-soluk);background:rgba(0,0,0,.34);
  transition:var(--gecis);
}
.secim label:hover{border-color:var(--cizgi)}
.secim label b{display:block;font-family:var(--ust);font-weight:400;font-size:1.08rem;color:var(--krem);line-height:1.25}
.secim label i{display:block;font-style:normal;font-size:.72rem;color:var(--metin-soluk);margin-top:6px}
.secim label u{display:block;text-decoration:none;font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--altin-koyu);margin-top:9px}
.secim input:checked + label{border-color:var(--altin);background:rgba(201,162,39,.09)}
.secim input:focus-visible + label{outline:2px solid var(--altin-acik);outline-offset:2px}

.pul{display:flex;flex-wrap:wrap;gap:8px}
.pul input{position:absolute;opacity:0;width:0;height:0}
.pul label{
  padding:10px 17px;border:1px solid var(--cizgi-soluk);border-radius:99px;cursor:pointer;
  font-size:.76rem;color:var(--metin-soluk);transition:var(--gecis);
}
.pul label:hover{border-color:var(--cizgi);color:var(--krem)}
.pul input:checked + label{border-color:var(--altin);color:var(--altin-acik);background:rgba(201,162,39,.1)}

/* takvim */
.takvim{margin-top:6px;max-width:420px}
.takvim-ay{
  display:flex;align-items:center;justify-content:space-between;
  font-family:var(--ust);font-size:1.16rem;color:var(--krem);margin-bottom:14px;
}
.gunler{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.gunler .bas{
  text-align:center;font-size:.55rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--metin-soluk);padding-bottom:8px;
}
.gun{
  aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  border:1px solid var(--cizgi-soluk);background:rgba(0,0,0,.3);
  font-size:.86rem;color:var(--metin);transition:var(--gecis);border-radius:var(--r);
}
.gun em{width:3px;height:3px;border-radius:50%;background:var(--altin);font-style:normal}
.gun:hover:not(:disabled){border-color:var(--altin);color:var(--krem)}
.gun:disabled{opacity:.24;cursor:not-allowed}
.gun.secili{background:var(--altin);color:#0a0806;border-color:var(--altin);font-weight:500}
.gun.secili em{background:#0a0806}
.gun.bos{border:0;background:none;pointer-events:none}

.saatler{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:7px;margin-top:22px}
.saat{
  padding:13px 6px;border:1px solid var(--cizgi-soluk);background:rgba(0,0,0,.3);
  font-size:.88rem;color:var(--metin);text-align:center;transition:var(--gecis);border-radius:var(--r);
}
.saat:hover{border-color:var(--altin);color:var(--krem)}
.saat.secili{background:var(--altin);color:#0a0806;border-color:var(--altin);font-weight:500}
.bos-uyari{
  margin-top:20px;padding:16px 18px;border:1px dashed var(--cizgi-soluk);
  font-size:.9rem;color:var(--metin-soluk);
}

.onay-satir{display:flex;gap:13px;align-items:flex-start;margin-top:6px}
.onay-satir input{
  appearance:none;-webkit-appearance:none;flex:0 0 20px;width:20px;height:20px;margin-top:2px;
  border:1px solid var(--cizgi-soluk);background:rgba(0,0,0,.4);border-radius:var(--r);
  cursor:pointer;transition:var(--gecis);position:relative;
}
.onay-satir input:checked{background:var(--altin);border-color:var(--altin)}
.onay-satir input:checked::after{content:'';position:absolute;left:6px;top:2px;width:5px;height:10px;border:solid #0a0806;border-width:0 2px 2px 0;transform:rotate(45deg)}
.onay-satir span{font-size:.84rem;color:var(--metin-soluk);line-height:1.6}

.form-alt{display:flex;gap:10px;margin-top:32px;flex-wrap:wrap}
.form-alt .dg{flex:1;min-width:150px}

.ozet-kutu{
  border:1px solid var(--cizgi-soluk);background:rgba(0,0,0,.32);
  padding:20px 22px;margin-bottom:24px;
}
.ozet-kutu dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:9px 20px}
.ozet-kutu dt{font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--metin-soluk);padding-top:4px}
.ozet-kutu dd{margin:0;color:var(--krem);font-size:.96rem}

.mesaj{
  margin-top:20px;padding:15px 18px;border:1px solid;font-size:.9rem;border-radius:var(--r);
}
.mesaj.hata{border-color:rgba(180,80,70,.5);color:#e0a09a;background:rgba(120,40,35,.14)}
.mesaj.iyi{border-color:var(--cizgi);color:var(--altin-acik);background:rgba(201,162,39,.08)}

.tamam{text-align:center;padding:22px 0 6px}
.tamam-halka{
  width:74px;height:74px;margin:0 auto 26px;border:1px solid var(--altin);border-radius:50%;
  display:grid;place-items:center;color:var(--altin);font-size:1.7rem;
  animation:halka .7s cubic-bezier(.22,.61,.36,1);
}
@keyframes halka{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.tamam-ref{
  display:inline-block;margin-top:8px;padding:9px 22px;border:1px solid var(--cizgi);
  font-family:var(--ust);font-size:1.35rem;color:var(--altin-acik);letter-spacing:.12em;
}

.yukleniyor{position:relative;color:transparent!important;pointer-events:none}
.yukleniyor::after{
  content:'';position:absolute;top:50%;left:50%;width:19px;height:19px;margin:-10px 0 0 -10px;
  border:2px solid rgba(10,8,6,.3);border-top-color:#0a0806;border-radius:50%;
  animation:don .7s linear infinite;
}
.dg-bos.yukleniyor::after{border-color:rgba(201,162,39,.3);border-top-color:var(--altin)}
@keyframes don{to{transform:rotate(360deg)}}

/* ---------------------------------------------------------------- alt bilgi */
.alt{border-top:1px solid var(--cizgi-soluk);background:rgba(4,4,4,.86);padding-block:60px 34px}
.alt-ic{display:grid;gap:38px}
@media (min-width:820px){.alt-ic{grid-template-columns:1.4fr 1fr 1fr}}
.alt h2{font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;color:var(--altin);margin-bottom:18px;font-family:var(--govde)}
.alt ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.alt a{font-size:.9rem;color:var(--metin-soluk);transition:color .3s}
.alt a:hover{color:var(--altin-acik)}
.alt-marka{font-family:var(--ust);font-size:1.7rem;color:var(--krem);line-height:1.1;margin-bottom:14px}
.alt-not{font-size:.88rem;color:var(--metin-soluk);max-width:40ch}
.alt-cizgi{
  margin-top:46px;padding-top:22px;border-top:1px solid var(--cizgi-soluk);
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  font-size:.74rem;color:#6d665d;
}

/* ---------------------------------------------------------------- yüzen düğmeler */
.yuzen{
  position:fixed;right:16px;bottom:16px;z-index:70;
  display:flex;flex-direction:column;align-items:flex-end;gap:10px;
  pointer-events:none;
}
.yuzen > *{pointer-events:auto}

/* WhatsApp — simge sağda sabit kalır, üzerine gelince sola doğru yazı açılır */
.wa{
  position:relative;
  display:flex;align-items:center;
  height:58px;border-radius:999px;
  background:linear-gradient(145deg,#2bd96f,#12a04a 55%,#0b7536);
  color:#fff;
  box-shadow:
    0 12px 34px rgba(0,0,0,.55),
    0 8px 26px rgba(18,160,74,.38),
    inset 0 1px 0 rgba(255,255,255,.28);
  transition:transform .45s cubic-bezier(.22,.61,.36,1),box-shadow .45s;
  animation:yuzenGir .7s cubic-bezier(.22,.61,.36,1) .8s backwards;
}
/* nabız halkası */
.wa::before{
  content:'';position:absolute;inset:0;border-radius:999px;pointer-events:none;
  border:2px solid rgba(43,217,111,.6);
  animation:waNabiz 2.8s cubic-bezier(.22,.61,.36,1) infinite;
}
.wa:hover::before{animation:none;opacity:0}
.wa:hover{
  transform:translateY(-3px);
  box-shadow:
    0 18px 44px rgba(0,0,0,.62),
    0 12px 36px rgba(18,160,74,.58),
    inset 0 1px 0 rgba(255,255,255,.34);
}
.wa-ic{flex:0 0 58px;width:58px;height:58px;display:grid;place-items:center;order:2}
.wa-ic svg{width:29px;height:29px;fill:currentColor;filter:drop-shadow(0 1px 2px rgba(0,0,0,.28))}
.wa-yazi{
  order:1;
  max-width:0;padding-left:0;overflow:hidden;white-space:nowrap;opacity:0;
  font-family:var(--govde);font-size:.86rem;font-weight:500;letter-spacing:.015em;
  transition:max-width .5s cubic-bezier(.22,.61,.36,1),padding-left .5s cubic-bezier(.22,.61,.36,1),opacity .35s;
}
.wa:hover .wa-yazi,.wa:focus-visible .wa-yazi{max-width:220px;padding-left:24px;opacity:1}

/* Instagram — markanın altın diliyle, ikincil */
.ig{
  width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;
  color:var(--altin-acik);
  background:rgba(19,17,16,.8);
  border:1px solid var(--cizgi);
  box-shadow:0 10px 26px rgba(0,0,0,.5);
  transition:var(--gecis);
  animation:yuzenGir .7s cubic-bezier(.22,.61,.36,1) .95s backwards;
}
@supports (backdrop-filter:blur(10px)){.ig{backdrop-filter:blur(12px)}}
.ig svg{width:21px;height:21px;fill:currentColor}
.ig:hover{
  transform:translateY(-3px);
  color:var(--siyah);background:var(--altin-acik);border-color:var(--altin-acik);
  box-shadow:0 14px 32px rgba(0,0,0,.55),0 0 26px rgba(230,205,139,.34);
}

@keyframes waNabiz{
  0%  {transform:scale(1);opacity:.9}
  70% {transform:scale(1.42);opacity:0}
  100%{transform:scale(1.42);opacity:0}
}
@keyframes yuzenGir{
  from{opacity:0;transform:translateY(16px) scale(.72)}
  to  {opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .wa::before{animation:none;opacity:.3}
  .wa,.ig{animation:none}
}
@media (min-width:980px){.yuzen{right:26px;bottom:26px}}

/* alt sabit çubuk — mobil */
.mobil-alt{
  position:fixed;left:0;right:0;bottom:0;z-index:65;
  display:flex;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:rgba(6,5,5,.94);backdrop-filter:blur(14px);
  border-top:1px solid var(--cizgi-soluk);
  transform:translateY(120%);transition:transform .45s cubic-bezier(.22,.61,.36,1);
}
.mobil-alt.gorun{transform:none}
.mobil-alt .dg{flex:1;padding:14px 10px;min-height:48px}
@media (min-width:980px){.mobil-alt{display:none}}
@media (max-width:979px){
  /* Alt çubuk göründüğü an yüzen düğmeler çekilir — ikisi de aynı WhatsApp'a
     gidiyor ve yüzen olan sayfa içeriğinin sağ ucunu örtüyordu. */
  body.alt-acik .yuzen{opacity:0;visibility:hidden;pointer-events:none}
  .yuzen{bottom:78px;transition:opacity .3s ease,visibility .3s ease}
  .wa{height:54px}
  .wa-ic{flex-basis:54px;width:54px;height:54px}
  .ig{width:42px;height:42px}
  body{padding-bottom:0}
}

/* ---------------------------------------------------------------- dokunma hedefleri
   Ölçüldü (390/430/768): .ayna-filtre button 24px, alt bilgi bağlantıları 18px,
   iletişim bağlantıları 20px, menü düğmesi 37px — hepsi 44px eşiğinin altında.
   Yükseklik yalnız satır yüksekliğinden geliyordu; dikey dolgu görsel ritmi
   bozmadan hedefi büyütür, satır arası zaten grid gap ile ayrı. */
@media (max-width:979px){
  .ayna-filtre button{padding-block:10px;min-height:44px}
  .alt ul a{display:inline-block;padding-block:11px}
  .alt ul{gap:0}
  .menu-dg{min-height:44px;justify-content:center}
  .ayna-fiyat{padding-block:8px}
}

/* ================================================================ yeni katman
   2026-08-31 rakip araştırması paketi: seçki, özel günler, hijyen sözü,
   bakım+dolgu, hediye bandı, nailfie düğmesi, stil testi modalı.
   Hepsi mevcut jetonlarla (altın/krem/çizgi) — yeni renk türetilmedi. */

/* ---- seçki: sezonluk kürasyon ---- */
.secki{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:48px;
}
.secki-kart{
  position:relative;overflow:hidden;border-radius:var(--r);
  border:1px solid var(--cizgi-soluk);background:var(--kat);
  cursor:pointer;padding:0;text-align:left;
  transition:border-color .4s,transform .5s cubic-bezier(.22,.61,.36,1);
}
.secki-kart img{
  display:block;width:100%;height:100%;aspect-ratio:3/4;object-fit:cover;
  transition:transform .8s cubic-bezier(.22,.61,.36,1),filter .5s;
  filter:saturate(.94);
}
.secki-kart::after{ /* alt yazı okunurluğu için kalıcı degrade */
  content:'';position:absolute;inset:auto 0 0;height:46%;pointer-events:none;
  background:linear-gradient(to top,rgba(5,5,5,.82),transparent);
}
.secki-kart:hover{border-color:var(--cizgi);transform:translateY(-4px)}
.secki-kart:hover img{transform:scale(1.05);filter:saturate(1.05)}
.secki-ad{
  position:absolute;left:14px;right:14px;bottom:12px;z-index:1;
  font-family:var(--ust);font-size:clamp(.98rem,1.6vw,1.18rem);color:var(--krem);
  letter-spacing:.04em;line-height:1.25;
}
.secki-no{
  position:absolute;top:10px;right:12px;z-index:1;
  font-size:.6rem;letter-spacing:.22em;color:var(--altin-acik);
  background:rgba(5,5,5,.55);padding:4px 8px;border-radius:var(--r);
  backdrop-filter:blur(6px);
}
.secki-test{
  margin-top:34px;display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:16px 26px;
  border:1px solid var(--cizgi-soluk);border-radius:var(--r);
  padding:22px 26px;background:linear-gradient(150deg,rgba(32,27,22,.5),rgba(10,9,8,.5));
}
.secki-test p{margin:0;font-family:var(--ust);font-size:clamp(1.05rem,2vw,1.3rem);color:var(--krem)}
.test-sure{opacity:.55;letter-spacing:.04em;text-transform:none}

/* ---- özel günler ---- */
.ozel{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:48px}
.ozel-kart{
  position:relative;overflow:hidden;
  border:1px solid var(--cizgi-soluk);border-radius:var(--r);
  padding:34px 30px;background:linear-gradient(160deg,rgba(26,22,18,.72),rgba(10,9,8,.72));
  transition:border-color .4s,background .4s;
  display:flex;flex-direction:column;align-items:flex-start;gap:12px;
}
.ozel-kart::before{ /* üst altın kıvılcım çizgisi — .kart ile aynı dil */
  content:'';position:absolute;top:0;left:0;width:100%;height:1px;
  background:linear-gradient(90deg,var(--altin),transparent 70%);
  transform:scaleX(0);transform-origin:left;transition:transform .6s;
}
.ozel-kart:hover{border-color:var(--cizgi)}
.ozel-kart:hover::before{transform:scaleX(1)}
.ozel-rozet{
  font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--altin-acik);border:1px solid var(--cizgi);border-radius:999px;
  padding:5px 12px;
}
.ozel-kart h3{font-size:clamp(1.2rem,2.6vw,1.5rem)}
.ozel-kart p{font-size:.93rem;color:var(--metin-soluk);margin:0;flex:1}
.ozel-wa{
  display:inline-flex;align-items:center;gap:9px;margin-top:8px;
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--altin);
  border-bottom:1px solid var(--cizgi);padding-block:6px;transition:color .3s,border-color .3s;
}
.ozel-wa svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.4;transition:transform .35s}
.ozel-wa:hover{color:var(--krem);border-bottom-color:var(--krem)}
.ozel-wa:hover svg{transform:translateX(4px)}

/* ---- hijyen sözü ---- */
.hijyen{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:48px}
.hijyen-madde{
  display:flex;gap:18px;align-items:flex-start;
  border:1px solid var(--cizgi-soluk);border-radius:var(--r);
  padding:28px 26px;background:rgba(19,17,16,.5);
  transition:border-color .4s,background .4s;
}
.hijyen-madde:hover{border-color:var(--cizgi);background:rgba(26,22,18,.6)}
.hijyen-no{
  font-family:var(--ust);font-size:1.9rem;line-height:1;color:var(--altin);
  opacity:.85;flex:0 0 auto;
}
.hijyen-madde h3{font-size:1.06rem;margin-bottom:9px}
.hijyen-madde p{font-size:.9rem;color:var(--metin-soluk);margin:0}

/* ---- bakım rehberi + dolgu ritmi ---- */
.bakim{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:48px}
.bakim-madde{
  border-left:1px solid var(--cizgi);border-radius:0;
  padding:6px 0 6px 22px;
  transition:border-color .4s;
}
.bakim-madde:hover{border-left-color:var(--altin)}
.bakim-madde h3{font-size:1.04rem;margin-bottom:9px;color:var(--altin-acik)}
.bakim-madde p{font-size:.9rem;color:var(--metin-soluk);margin:0}
.dolgu{
  margin-top:44px;display:flex;flex-wrap:wrap;align-items:center;gap:20px 34px;
  border:1px solid var(--cizgi);border-radius:var(--r);
  padding:28px 30px;
  background:linear-gradient(140deg,rgba(201,162,39,.1),rgba(10,9,8,.4) 55%);
}
.dolgu-yazi{flex:1 1 380px}
.dolgu-yazi h3{font-family:var(--ust);font-size:clamp(1.25rem,2.6vw,1.6rem);margin-bottom:8px}
.dolgu-yazi p{font-size:.92rem;color:var(--metin-soluk);margin:0;max-width:64ch}

/* ---- hediye bandı ---- */
#hediye{padding-block:0}
.hediye{
  display:flex;flex-wrap:wrap;align-items:center;gap:26px 40px;
  border:1px solid var(--cizgi);border-radius:var(--r);
  padding:clamp(30px,5vw,54px);
  background:
    radial-gradient(120% 150% at 100% 0%,rgba(201,162,39,.16),transparent 55%),
    linear-gradient(160deg,rgba(26,22,18,.85),rgba(8,7,6,.85));
}
.hediye-yazi{flex:1 1 440px}
.hediye-yazi h2{margin-block:10px 14px}
.hediye-yazi p{font-size:.95rem;color:var(--metin-soluk);margin:0;max-width:62ch}

/* ---- nailfie düğmesi (ayna kapanış satırı) ---- */
.ayna-nailfie{
  display:inline-flex;align-items:center;gap:9px;
  background:none;border:0;cursor:pointer;padding:6px 0;
  font-family:var(--govde);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--metin-soluk);transition:color .3s;
}
.ayna-nailfie svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.3;transition:transform .35s}
.ayna-nailfie i{font-style:normal;text-transform:none;letter-spacing:.02em;opacity:.6}
.ayna-nailfie:hover{color:var(--altin-acik)}
.ayna-nailfie:hover svg{transform:translateY(2px)}
.ayna-nailfie.calisiyor{opacity:.5;pointer-events:none}

/* ---- stil testi modalı ---- */
/* KRİTİK: display:grid, tarayıcının [hidden]{display:none} kuralını ezer;
   bu satır olmadan görünmez örtü tüm sayfanın tıklamalarını yutar. */
.test-ortu[hidden]{display:none}
.test-ortu{
  position:fixed;inset:0;z-index:90;display:grid;place-items:center;
  padding:20px;background:rgba(5,5,5,.72);
  opacity:0;transition:opacity .35s;
}
@supports (backdrop-filter:blur(10px)){.test-ortu{backdrop-filter:blur(10px)}}
.test-ortu.acik{opacity:1}
.test-kutu{
  position:relative;width:min(560px,100%);max-height:min(86vh,720px);overflow:auto;
  background:linear-gradient(165deg,#191512,#0a0908);
  border:1px solid var(--cizgi);border-radius:var(--r);
  padding:clamp(26px,4vw,44px);
  transform:translateY(14px);transition:transform .45s cubic-bezier(.22,.61,.36,1);
  box-shadow:0 30px 90px rgba(0,0,0,.6);
}
.test-ortu.acik .test-kutu{transform:none}
.test-kapat{
  position:absolute;top:12px;right:14px;z-index:2;
  background:none;border:0;cursor:pointer;color:var(--metin-soluk);
  font-size:1.7rem;line-height:1;padding:8px;transition:color .3s;
}
.test-kapat:hover{color:var(--krem)}
.test-ust{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.test-adim{font-size:.66rem;letter-spacing:.22em;color:var(--metin-soluk)}
.test-soru{display:none}
.test-soru.acik{display:block;animation:testGir .45s cubic-bezier(.22,.61,.36,1)}
@keyframes testGir{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.test-soru h3{font-family:var(--ust);font-size:clamp(1.3rem,3vw,1.7rem);margin-bottom:22px}
.test-secenekler{display:grid;gap:10px}
.test-secenekler button{
  text-align:left;cursor:pointer;
  background:rgba(19,17,16,.6);border:1px solid var(--cizgi-soluk);border-radius:var(--r);
  padding:15px 18px;min-height:48px;
  font-family:var(--govde);font-size:.92rem;color:var(--metin);
  transition:border-color .3s,background .3s,color .3s;
}
.test-secenekler button:hover{border-color:var(--altin);color:var(--krem);background:rgba(32,27,22,.7)}
.test-sonuc{display:none}
.test-sonuc.acik{display:block;animation:testGir .45s cubic-bezier(.22,.61,.36,1)}
.test-sonuc h3{font-family:var(--ust);font-size:clamp(1.3rem,3vw,1.7rem);margin-bottom:8px}
.test-sonuc h3 em{color:var(--altin-acik);font-style:normal}
.test-sonuc>p{font-size:.92rem;color:var(--metin-soluk);margin:0 0 22px}
.test-eslesme{
  margin:-4px 0 0;font-size:.72rem;letter-spacing:.06em;color:var(--altin-acik);
  opacity:.85;
}
.test-oneriler{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.test-oneri{
  position:relative;overflow:hidden;border-radius:var(--r);cursor:pointer;padding:0;
  border:1px solid var(--cizgi-soluk);background:var(--kat);text-align:left;
  transition:border-color .35s,transform .45s cubic-bezier(.22,.61,.36,1);
}
.test-oneri:hover{border-color:var(--altin);transform:translateY(-3px)}
.test-oneri img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover}
.test-oneri span{
  display:block;padding:9px 10px;font-size:.74rem;color:var(--krem);
  letter-spacing:.03em;line-height:1.3;
}
.test-alt{margin-top:24px;display:flex;justify-content:center}

/* ---- yeni katman: dar ekran ---- */
@media (max-width:979px){
  .secki{grid-template-columns:repeat(2,1fr);gap:10px}
  .ozel{grid-template-columns:1fr}
  .hijyen{grid-template-columns:1fr}
  .bakim{grid-template-columns:1fr;gap:22px}
  .secki-test{justify-content:center;text-align:center}
  .dolgu .dg,.hediye .dg{width:100%;text-align:center}
  .ayna-nailfie{padding-block:10px;min-height:44px}
  .test-oneriler{gap:8px}
  .test-oneri span{font-size:.68rem}
}
@media (max-width:560px){
  .secki{grid-template-columns:repeat(2,1fr)}
  .secki-ad{left:10px;right:10px;bottom:9px;font-size:.9rem}
}

/* ---- journal (journal.php) ---- */
.jr{padding:150px 0 90px}
.jr-govde .zemin{opacity:.5}
.jr h1{font-family:var(--ust);font-weight:400;font-size:clamp(2rem,5.4vw,3.4rem);line-height:1.12;margin:14px 0 18px;color:var(--krem)}
.jr-liste .girisi{max-width:62ch}
.jr-kartlar{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:52px}
.jr-kart{
  position:relative;display:flex;flex-direction:column;gap:12px;
  border:1px solid var(--cizgi-soluk);border-radius:var(--r);
  padding:32px 28px;background:linear-gradient(160deg,rgba(26,22,18,.6),rgba(10,9,8,.6));
  transition:border-color .4s,transform .5s cubic-bezier(.22,.61,.36,1);
}
.jr-kart:hover{border-color:var(--cizgi);transform:translateY(-4px)}
.jr-no{font-family:var(--ust);font-size:2rem;line-height:1;color:var(--altin);opacity:.8}
.jr-tarih{font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--metin-soluk)}
.jr-kart h2{font-family:var(--ust);font-weight:400;font-size:clamp(1.2rem,2.4vw,1.5rem);line-height:1.25;color:var(--krem);margin:0}
.jr-kart p{font-size:.9rem;color:var(--metin-soluk);margin:0;flex:1}
.jr-oku{
  display:inline-flex;align-items:center;gap:8px;margin-top:6px;
  font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--altin);
}
.jr-oku svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.4;transition:transform .35s}
.jr-kart:hover .jr-oku svg{transform:translateX(4px)}

.jr-yazi{max-width:780px}
.jr-geri{
  display:inline-flex;align-items:center;gap:9px;margin-bottom:26px;
  font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--metin-soluk);
  transition:color .3s;padding-block:8px;
}
.jr-geri svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.4}
.jr-geri:hover{color:var(--krem)}
.jr-ozet{font-family:var(--ust);font-size:clamp(1.05rem,2.4vw,1.3rem);color:var(--altin-acik);line-height:1.5;margin:0 0 34px;font-style:italic}
.jr-metin{border-top:1px solid var(--cizgi-soluk);padding-top:34px}
.jr-metin h2{font-family:var(--ust);font-weight:400;font-size:clamp(1.3rem,3vw,1.7rem);color:var(--krem);margin:36px 0 12px}
.jr-metin p{font-size:1rem;line-height:1.85;color:var(--metin);margin:0 0 18px;max-width:70ch}
.jr-cta{
  margin-top:44px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;
  border:1px solid var(--cizgi);border-radius:var(--r);padding:26px 28px;
  background:linear-gradient(140deg,rgba(201,162,39,.08),rgba(10,9,8,.4) 55%);
}
.jr-cta p{flex:1 1 260px;margin:0;font-family:var(--ust);font-size:1.1rem;color:var(--krem)}
.jr-diger{margin-top:44px;border-top:1px solid var(--cizgi-soluk);padding-top:26px}
.jr-diger h3{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--metin-soluk);margin-bottom:14px}
.jr-diger a{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:15px 2px;border-bottom:1px solid var(--cizgi-soluk);
  font-family:var(--ust);font-size:1.12rem;color:var(--metin);transition:color .3s;
}
.jr-diger a:hover{color:var(--altin-acik)}
.jr-diger svg{width:16px;height:16px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.3}
@media (max-width:979px){
  .jr{padding-top:120px}
  .jr-kartlar{grid-template-columns:1fr}
  .jr-cta .dg{width:100%;text-align:center}
}