/* ============================================================
   LAMIA — MÜŞTERİ SİTESİ (salon.html)
   Aydınlık editoryal lüks. Franchise sitesinin (v2.css) hiçbir
   kuralına dokunmaz; iki dosya birbirinden tamamen bağımsızdır.
   ============================================================ */

:root{
  --kagit:#FBF8F4;
  --krem:#F3EBE1;
  --krem-2:#E7DACB;
  --koyu:#241E1B;
  --metin:#574D46;
  --soluk:#8B7F76;
  --gold:#C9A96E;
  --gold-koyu:#A9884C;
  --beyaz:#FFFFFF;
  --wa:#25D366;

  --serif:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono:'Space Grotesk', ui-monospace, monospace;

  --en:1320px;
  --pad:clamp(20px,4.4vw,64px);
  --bosluk:clamp(72px,10vw,150px);

  --e-out:cubic-bezier(.16,1,.3,1);
  --e-io:cubic-bezier(.76,0,.24,1);
  --golge:0 30px 70px -40px rgba(36,30,27,.5);
}

*,*::before,*::after{box-sizing:border-box; margin:0; padding:0}
[hidden]{display:none !important}
html{font-size:16px; -webkit-text-size-adjust:100%}
body{
  background:var(--kagit); color:var(--metin);
  font-family:var(--sans); font-size:16px; line-height:1.65; font-weight:300;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.kilitli{overflow:hidden}
img,video,svg{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
ul,ol{list-style:none}
button,input,select,textarea{font:inherit; color:inherit}
button{background:none; border:0; cursor:pointer}
::selection{background:var(--gold); color:#fff}
:focus-visible{outline:2px solid var(--gold-koyu); outline-offset:3px; border-radius:2px}
section[id]{scroll-margin-top:92px}
@media (max-width:860px){section[id]{scroll-margin-top:72px}}

.atla{position:fixed; top:-100px; left:16px; z-index:200; background:var(--koyu); color:#fff; padding:12px 18px; border-radius:4px}
.atla:focus{top:16px}

/* ---------- TİPOGRAFİ ---------- */
h1,h2,h3{font-family:var(--serif); font-weight:400; line-height:1.06; color:var(--koyu); letter-spacing:-.012em}
.h-dev{font-size:clamp(46px,8.2vw,124px)}
.h-buyuk{font-size:clamp(32px,5vw,68px)}
h1 em,h2 em{font-style:italic; color:var(--gold-koyu)}

.etiket{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold-koyu); font-weight:500; margin-bottom:22px;
  display:flex; align-items:center; gap:13px;
}
.etiket::before{content:''; width:clamp(20px,3vw,38px); height:1px; background:var(--gold); flex:none}

/* satır maskeli başlık — JS kelimeleri sarar */
.kelime{display:inline-block; overflow:hidden; vertical-align:top}
.kelime > i{display:inline-block; font-style:inherit; will-change:transform}

/* ---------- ATMOSFER ---------- */
#grain{
  position:fixed; inset:-120%; z-index:9997; pointer-events:none;
  opacity:.032; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 800ms steps(4) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}25%{transform:translate(-2%,1%)}
  50%{transform:translate(1%,-2%)}75%{transform:translate(-1%,-1%)}100%{transform:translate(2%,2%)}
}

/* okuma ilerlemesi */
#ilerleme{position:fixed; top:0; left:0; right:0; height:2px; z-index:95; pointer-events:none; background:transparent}
#ilerleme i{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--gold),var(--gold-koyu))}

/* ---------- İMLEÇ (yalnız hassas işaretleyicide) ---------- */
#imlec,#imlec-halka{display:none}
@media (pointer:fine){
  #imlec{
    display:block; position:fixed; top:0; left:0; width:6px; height:6px; border-radius:50%;
    background:var(--gold-koyu); z-index:10002; pointer-events:none; transform:translate(-50%,-50%);
  }
  #imlec-halka{
    display:grid; place-items:center; position:fixed; top:0; left:0; width:40px; height:40px;
    border-radius:50%; border:1px solid rgba(169,136,76,.42); z-index:10001; pointer-events:none;
    transform:translate(-50%,-50%);
    transition:width .4s var(--e-out), height .4s var(--e-out), background-color .35s, border-color .35s;
  }
  #imlec-yazi{
    font-family:var(--mono); font-size:8px; letter-spacing:.2em; text-transform:uppercase;
    color:#fff; opacity:0; transition:opacity .25s; white-space:nowrap;
  }
  body.imlec-var #imlec{opacity:0}
  body.imlec-var #imlec-halka{width:62px; height:62px; background:rgba(201,169,110,.16); border-color:var(--gold)}
  body.imlec-yazili #imlec-halka{width:84px; height:84px; background:var(--gold-koyu); border-color:var(--gold-koyu)}
  body.imlec-yazili #imlec-yazi{opacity:1}
}

/* ---------- AÇILIŞ PERDESİ ---------- */
#acilis{
  position:fixed; inset:0; z-index:10000; background:var(--kagit);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:30px;
}
.acilis-logo{width:min(280px,54vw); height:auto; opacity:0}
.acilis-cizgi{width:min(200px,40vw); height:1px; background:var(--krem-2); overflow:hidden}
.acilis-cizgi i{display:block; height:100%; width:0; background:var(--gold-koyu)}

/* ---------- DÜĞMELER ---------- */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  padding:16px 34px; border-radius:100px; font-size:12.5px; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; cursor:pointer; overflow:hidden;
  transition:color .45s var(--e-out), border-color .45s, background-color .45s;
  will-change:transform;
}
.btn .btn-lbl{position:relative; z-index:2}
.btn::before{
  content:''; position:absolute; inset:0; z-index:1; border-radius:inherit;
  background:var(--gold-koyu); transform:translateY(101%);
  transition:transform .55s var(--e-out);
}
.btn:hover::before{transform:translateY(0)}
.btn-ic{background:var(--koyu); color:#fff}
.btn-bos{border:1px solid var(--krem-2); color:var(--koyu); background:rgba(255,255,255,.6)}
.btn-bos:hover{color:#fff; border-color:var(--gold-koyu)}
.btn-wa{background:var(--wa); color:#fff}
.btn-wa::before{background:#1eb455}
.btn-tam{width:100%}

/* ---------- ÜST BAR ---------- */
#nav{position:fixed; inset:0 0 auto 0; z-index:90; padding:22px 0; transition:padding .45s var(--e-out), background .45s, box-shadow .45s}
#nav.kucuk{
  padding:11px 0; background:rgba(251,248,244,.82);
  backdrop-filter:saturate(180%) blur(16px); -webkit-backdrop-filter:saturate(180%) blur(16px);
  box-shadow:0 1px 0 rgba(36,30,27,.07);
}
.nav-in{max-width:var(--en); margin:0 auto; padding:0 var(--pad); display:flex; align-items:center; justify-content:space-between; gap:24px}
.brand img{height:38px; width:auto; object-fit:contain; transition:height .45s var(--e-out)}
#nav.kucuk .brand img{height:30px}

.nav-links{display:flex; gap:34px}
.nav-links a{font-size:13px; letter-spacing:.04em; color:var(--metin); position:relative; padding:5px 0; overflow:hidden; display:block}
.nav-links a span{display:block; transition:transform .5s var(--e-out)}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--gold-koyu);
  transform:scaleX(0); transform-origin:right; transition:transform .5s var(--e-out);
}
.nav-links a:hover::after,.nav-links a.etkin::after{transform:scaleX(1); transform-origin:left}
.nav-links a:hover span{transform:translateY(-2px)}
.nav-links a.etkin{color:var(--koyu)}

.nav-cta{display:flex; align-items:center; gap:14px}
.nav-cta .btn{padding:12px 26px; font-size:11.5px}

/* Instagram — menüdeki tek ikon olduğu için çerçeveli, dokunma alanı 40px */
.nav-ig{
  display:grid; place-items:center; width:40px; height:40px; flex:0 0 auto;
  color:var(--metin); border:1px solid var(--krem-2); border-radius:50%;
  transition:color .35s ease, border-color .35s ease, background-color .35s ease;
}
.nav-ig svg{width:18px; height:18px; display:block}
.nav-ig:hover,.nav-ig:focus-visible{
  color:var(--gold-koyu); border-color:var(--gold-koyu); background:rgba(201,169,110,.10);
}

.menu-btn{display:none; width:44px; height:44px; flex-direction:column; justify-content:center; gap:6px; align-items:flex-end}
.menu-btn i{display:block; height:1.5px; background:var(--koyu); transition:width .3s, transform .4s var(--e-out), opacity .2s}
.menu-btn i:nth-child(1){width:24px}
.menu-btn i:nth-child(2){width:16px}
.menu-btn.acik i:nth-child(1){transform:translateY(3.7px) rotate(45deg)}
.menu-btn.acik i:nth-child(2){width:24px; transform:translateY(-3.7px) rotate(-45deg)}

/* ---------- MOBİL MENÜ ---------- */
.mobil-menu{
  position:fixed; inset:0; z-index:85; background:var(--kagit);
  display:flex; flex-direction:column; justify-content:center;
  padding:100px var(--pad) calc(36px + env(safe-area-inset-bottom));
  opacity:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.mobil-menu nav{display:flex; flex-direction:column}
.mobil-menu nav a{
  font-family:var(--serif); font-size:clamp(28px,7.6vw,44px); color:var(--koyu);
  padding:13px 0; border-bottom:1px solid var(--krem-2); display:flex; align-items:baseline; gap:16px;
}
.mobil-menu nav a em{font-family:var(--mono); font-size:11px; font-style:normal; color:var(--gold-koyu); letter-spacing:.16em}
.mobil-alt{display:flex; gap:12px; margin-top:34px; flex-wrap:wrap}
.mobil-alt .btn{flex:1 1 140px}

/* ---------- HERO ---------- */
.hero{position:relative; min-height:100svh; display:flex; align-items:center; padding:130px var(--pad) 100px; overflow:hidden}
.hero-medya{position:absolute; inset:-8% 0; z-index:0; will-change:transform}
.hero-medya video{width:100%; height:100%; object-fit:cover}
.hero-perde{
  position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(251,248,244,.97) 0%, rgba(251,248,244,.9) 32%, rgba(251,248,244,.42) 62%, rgba(251,248,244,.1) 100%),
    linear-gradient(to top, rgba(251,248,244,.92), transparent 46%);
}
.hero-ic{position:relative; z-index:2; max-width:var(--en); margin:0 auto; width:100%}
.hero h1{max-width:13ch}
.hero-alt{margin-top:30px; max-width:46ch; font-size:clamp(15.5px,1.5vw,18.5px)}
.hero-btn{display:flex; gap:14px; margin-top:44px; flex-wrap:wrap}
.hero-kaydir{
  position:absolute; left:50%; bottom:36px; transform:translateX(-50%); z-index:2;
  width:26px; height:44px; border:1px solid var(--krem-2); border-radius:14px;
  display:flex; justify-content:center; padding-top:8px; background:rgba(255,255,255,.45);
}
.hero-kaydir span{width:2px; height:8px; border-radius:2px; background:var(--gold-koyu); animation:kaydir 1.9s var(--e-out) infinite}
@keyframes kaydir{0%{opacity:0; transform:translateY(-4px)}35%{opacity:1}100%{opacity:0; transform:translateY(14px)}}

/* ---------- GÜVEN ŞERİDİ ---------- */
.serit{background:var(--krem); border-block:1px solid var(--krem-2)}
.serit ul{max-width:var(--en); margin:0 auto; padding:clamp(40px,5vw,62px) var(--pad); display:grid; grid-template-columns:repeat(4,1fr); gap:36px}
.serit li{position:relative; padding-left:21px}
.serit li::before{content:''; position:absolute; left:0; top:9px; width:7px; height:7px; border-radius:50%; background:var(--gold)}
.serit b{display:block; color:var(--koyu); font-weight:500; font-size:15px; margin-bottom:5px}
.serit span{font-size:13.5px; color:var(--soluk); line-height:1.55}

/* ---------- BÖLÜM ORTAK ---------- */
.bolum{max-width:var(--en); margin:0 auto; padding:var(--bosluk) var(--pad)}
.bolum-bas{max-width:62ch; margin-bottom:clamp(44px,5.5vw,76px)}
.bolum-alt{margin-top:24px; color:var(--soluk); max-width:52ch}

/* ---------- KAMPANYA ŞERİDİ ---------- */
.kampanya{background:var(--koyu); color:#fff}
.kampanya-in{
  max-width:var(--en); margin:0 auto; padding:16px var(--pad);
  display:flex; align-items:center; justify-content:center; gap:clamp(14px,2.4vw,30px);
  flex-wrap:wrap; text-align:center;
}
.kampanya-in p{display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:center}
.kampanya-in b{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold); font-weight:500;
}
.kampanya-in span{font-family:var(--serif); font-size:clamp(17px,1.9vw,22px); color:#fff}
.kampanya-btn{
  font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold);
  border-bottom:1px solid rgba(201,169,110,.5); padding-bottom:3px; white-space:nowrap;
  transition:color .3s, border-color .3s;
}
.kampanya-btn:hover{color:#fff; border-color:#fff}
@media (max-width:520px){
  .kampanya-in{gap:10px}
  .kampanya-in p{gap:6px; flex-direction:column}
}

/* ---------- KAYAN ŞERİT ---------- */
.marki{
  overflow:hidden; padding:clamp(16px,2vw,26px) 0; background:var(--kagit);
  border-bottom:1px solid var(--krem-2); user-select:none;
}
.marki-ray{display:flex; align-items:center; gap:clamp(18px,2.4vw,34px); width:max-content; animation:marki 42s linear infinite}
.marki-ray span{font-family:var(--serif); font-size:clamp(20px,2.4vw,32px); color:var(--koyu); white-space:nowrap; opacity:.55}
.marki-ray i{width:6px; height:6px; border-radius:50%; background:var(--gold); flex:none}
@keyframes marki{from{transform:translateX(0)} to{transform:translateX(-50%)}}
.marki:hover .marki-ray{animation-play-state:paused}
@media (prefers-reduced-motion: reduce){.marki-ray{animation:none}}

/* ---------- KURUCULAR (çevrilen kitap sayfası) ---------- */
.hikaye{background:var(--krem); border-block:1px solid var(--krem-2)}
.hikaye-in{max-width:var(--en); margin:0 auto; padding:var(--bosluk) var(--pad)}

/* başlık + sekmeler */
.kitap-bas{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:20px 32px; margin-bottom:clamp(30px,3.6vw,50px);
}
.kitap-bas .etiket{margin-bottom:0}
.kitap-sekme{display:flex; gap:6px; background:var(--beyaz); border:1px solid var(--krem-2); border-radius:100px; padding:5px}
.sekme{
  padding:10px 20px; border-radius:100px; font-size:12.5px; letter-spacing:.03em;
  color:var(--soluk); white-space:nowrap; transition:color .35s, background-color .35s;
}
.sekme:hover{color:var(--koyu)}
.sekme.etkin{background:var(--koyu); color:#fff}

/* kitap: sayfalar aynı ızgara hücresinde üst üste durur, yükseklik sabit kalır */
.kitap{
  display:grid; perspective:2400px;
}
.kitap-sayfa{
  grid-area:1/1; position:relative;
  transform-origin:left center; transform-style:preserve-3d;
  will-change:transform;
}
/* etkin olmayan sayfa yerini korur ama görünmez ve tıklanamaz */
.kitap-sayfa:not(.etkin){visibility:hidden}
/* yaprağın arka yüzü: düz kâğıt */
.kitap-sirt{
  position:absolute; inset:0; border-radius:4px; backface-visibility:hidden;
  transform:rotateY(180deg) translateZ(.5px);
  background:linear-gradient(90deg,var(--krem-2),var(--krem) 18%,var(--kagit));
  box-shadow:inset 12px 0 22px -16px rgba(36,30,27,.5);
}
/* iki yüz aynı düzlemde olursa titriyor: yarım piksel ayır */
.kitap-yuz{position:relative; backface-visibility:hidden; transform:translateZ(.5px)}
/* çevrilirken koyulaşan gölge — JS opaklığı sürer */
.kitap-golge{
  position:absolute; inset:0; z-index:3; pointer-events:none; opacity:0; border-radius:4px;
  background:linear-gradient(90deg,rgba(36,30,27,.45),rgba(36,30,27,.06) 55%,transparent);
}

.kurucu-duzen{
  display:grid; grid-template-columns:.85fr 1.15fr;
  gap:clamp(36px,6vw,90px); align-items:start;
}

/* alt kumanda */
.kitap-alt{
  display:flex; align-items:center; gap:18px;
  margin-top:clamp(28px,3.4vw,44px); padding-top:clamp(22px,2.6vw,32px);
  border-top:1px solid var(--krem-2);
}
.kitap-ok{
  width:44px; height:44px; flex:none; display:grid; place-items:center;
  border:1px solid var(--krem-2); border-radius:50%; background:var(--beyaz); color:var(--koyu);
  transition:background-color .35s, color .35s, border-color .35s;
}
.kitap-ok svg{width:19px; height:19px}
.kitap-ok:hover{background:var(--koyu); color:#fff; border-color:var(--koyu)}
.kitap-sayac{font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:var(--soluk)}
.kitap-sayac b{color:var(--koyu); font-weight:400}

.kurucu-foto{position:relative; border-radius:4px; overflow:hidden; box-shadow:var(--golge)}
.kurucu-foto img{width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center 18%}
.kurucu-foto figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:26px 24px 20px; color:#fff;
  background:linear-gradient(to top, rgba(28,23,20,.82), transparent);
}
.kurucu-foto b{display:block; font-family:var(--serif); font-size:24px; font-weight:500}
.kurucu-foto span{font-size:11px; letter-spacing:.2em; text-transform:uppercase; opacity:.8}

.hikaye-metin blockquote{margin:32px 0 0; position:relative; padding-left:26px; border-left:1px solid var(--gold)}
.hikaye-metin blockquote p{margin-bottom:18px; font-size:clamp(15.5px,1.5vw,17.5px); color:var(--metin)}
.hikaye-metin blockquote p:last-child{margin-bottom:0}
.hikaye-sayilar{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:44px; padding-top:32px; border-top:1px solid var(--krem-2)}
.hikaye-sayilar b{display:block; font-family:var(--serif); font-size:clamp(38px,4.4vw,58px); color:var(--gold-koyu); line-height:1; font-weight:400}
.hikaye-sayilar span{display:block; margin-top:8px; font-size:12.5px; color:var(--soluk); line-height:1.45}

/* ---------- HİZMETLER: sabitlenmiş yatay kart sahnesi ---------- */
.hizmetler{padding:var(--bosluk) 0}
.hizmetler .bolum-bas{max-width:var(--en); margin:0 auto clamp(40px,5vw,64px); padding:0 var(--pad)}

.hz-ipucu{margin-top:26px; display:flex; align-items:center; gap:12px}
.hz-ipucu span{font-family:var(--mono); font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--soluk)}
.hz-ipucu::after{
  content:''; width:54px; height:1px; background:linear-gradient(90deg,var(--gold),transparent);
  animation:ipucu 2s var(--e-out) infinite;
}
@keyframes ipucu{0%{transform:translateX(0); opacity:.4}50%{opacity:1}100%{transform:translateX(14px); opacity:.4}}

.hz-dis{position:relative}
.hz-yapis{height:100svh; display:flex; align-items:center; overflow:hidden; position:relative}
.hz-ray{display:flex; padding:0 var(--pad); width:max-content; will-change:transform}

.hz-kart{
  position:relative; flex:none; width:clamp(290px,27vw,430px);
  background:var(--beyaz); border:1px solid var(--krem-2); border-radius:5px; overflow:hidden;
  box-shadow:0 24px 60px -46px rgba(36,30,27,.55);
  transform-origin:center bottom; will-change:transform;
}
/* kartlar birbirinin üstüne binsin — sağdaki öne gelir */
.hz-kart + .hz-kart{margin-left:clamp(-52px,-2.6vw,-18px)}
.hz-kart:nth-child(1){z-index:1}.hz-kart:nth-child(2){z-index:2}.hz-kart:nth-child(3){z-index:3}
.hz-kart:nth-child(4){z-index:4}.hz-kart:nth-child(5){z-index:5}.hz-kart:nth-child(6){z-index:6}
.hz-kart:nth-child(7){z-index:7}

.hz-medya{position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--krem)}
.hz-medya img,.hz-medya video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform:scale(1.12); will-change:transform;    /* JS içeride paralaks kaydırır */
}
.hz-medya::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(28,23,20,.42), transparent 46%);
}
.hz-mono{display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--krem),var(--krem-2))}
.hz-mono > span:first-child{font-family:var(--serif); font-size:110px; color:rgba(169,136,76,.4); line-height:1; position:static; transform:none}
.hz-no{
  position:absolute; left:20px; bottom:16px; z-index:2;
  font-family:var(--mono); font-size:11px; letter-spacing:.24em; color:#fff;
}
.hz-govde{padding:26px 26px 30px}
.hz-govde h3{font-size:clamp(25px,2.4vw,34px); line-height:1.02; margin-bottom:14px}
.hz-govde > p{font-size:14.5px; color:var(--soluk); min-height:3.6em}
.hz-etiket{display:flex; flex-wrap:wrap; gap:7px; margin-top:18px}
.hz-etiket li{padding:7px 13px; border:1px solid var(--krem-2); border-radius:100px; font-size:12px; color:var(--metin)}
.hz-btn{
  display:inline-block; margin-top:22px; font-size:12.5px; letter-spacing:.06em;
  color:var(--gold-koyu); border-bottom:1px solid rgba(169,136,76,.45); padding-bottom:3px;
  transition:border-color .35s, color .35s;
}
.hz-btn:hover{color:var(--koyu); border-color:var(--koyu)}
.hz-eylem{display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.hz-btn-ic{color:var(--koyu); border-color:rgba(36,30,27,.35)}
.hz-btn-ic:hover{color:var(--gold-koyu); border-color:var(--gold-koyu)}

/* sahne ilerlemesi */
.hz-durum{
  position:absolute; left:50%; bottom:clamp(18px,4vh,44px); transform:translateX(-50%);
  display:flex; align-items:center; gap:14px; z-index:20;
  font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:var(--soluk);
}
.hz-cubuk{width:clamp(90px,14vw,180px); height:1px; background:var(--krem-2); overflow:hidden}
.hz-cubuk i{display:block; height:100%; width:14%; background:var(--gold-koyu)}

.hiz-not{max-width:var(--en); margin:clamp(36px,5vw,60px) auto 0; padding:0 var(--pad); font-size:14px; color:var(--soluk)}

/* ---------- MEKÂN: yatay şerit ---------- */
.mekan{padding:var(--bosluk) 0; background:var(--krem); border-block:1px solid var(--krem-2); overflow:hidden}
.mekan-bas{max-width:var(--en); margin:0 auto 46px; padding:0 var(--pad)}
.mekan-bas h2{max-width:16ch}
.mekan-bas > p{margin-top:20px; color:var(--soluk); max-width:50ch}
/* tam genişlikte salon turu videosu */
.mekan-video{position:relative; margin:0 0 clamp(28px,4vw,52px); overflow:hidden}
.mekan-video video{width:100%; aspect-ratio:21/9; object-fit:cover; background:var(--krem-2)}
.mekan-video-yazi{
  position:absolute; left:var(--pad); bottom:clamp(20px,3vw,38px); color:#fff;
  text-shadow:0 2px 24px rgba(24,20,17,.5);
}
.mekan-video-yazi span{
  display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--gold); margin-bottom:8px;
}
.mekan-video-yazi p{font-family:var(--serif); font-size:clamp(20px,2.4vw,32px); line-height:1.2}
.mekan-video::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(28,23,20,.5), transparent 52%);
}
@media (max-width:640px){ .mekan-video video{aspect-ratio:4/3} }

.serit-kaydir{width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none}
.serit-kaydir::-webkit-scrollbar{display:none}
.serit-ray{display:flex; gap:clamp(14px,1.6vw,24px); padding:0 var(--pad); width:max-content}
.serit-ray figure{position:relative; width:clamp(260px,30vw,420px); flex:none}
.serit-ray img{width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:4px}
.serit-ray figcaption{
  margin-top:14px; font-family:var(--mono); font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--soluk);
}

/* ---------- TANITIM ---------- */
/* Kaynak dikey çekim (464x832). Kendi oranında gösteriliyor; geniş 16:9
   çerçeveye zorlansaydı ~4 kat büyütme gerekir ve bulanıklaşırdı. */
.tanitim{max-width:var(--en); margin:0 auto; padding:var(--bosluk) var(--pad)}
.tanitim-in{display:grid; grid-template-columns:1fr .8fr; gap:clamp(32px,5vw,80px); align-items:center}
.tanitim-yazi h2{max-width:12ch; margin-bottom:20px}
.tanitim-yazi > p{color:var(--soluk); max-width:42ch}
.tanitim-oynatici{
  position:relative; border-radius:6px; overflow:hidden; box-shadow:var(--golge);
  width:100%; max-width:400px; margin-left:auto; background:#000;
}
.tanitim-oynatici video{width:100%; aspect-ratio:9/16; object-fit:cover; background:#000; display:block}
.tanitim-oynatici video[controls]{object-fit:contain}
.oynat{
  position:absolute; inset:0; margin:auto; width:92px; height:92px; border-radius:50%;
  background:rgba(255,255,255,.92); display:flex; align-items:center; justify-content:center;
  transition:transform .45s var(--e-out), background .3s, opacity .3s;
}
.oynat span{width:0; height:0; margin-left:6px; border-left:20px solid var(--koyu); border-top:13px solid transparent; border-bottom:13px solid transparent}
.oynat:hover{transform:scale(1.08); background:#fff}
.oynat.gizli{opacity:0; pointer-events:none}
.video-sure{
  position:absolute; left:20px; bottom:18px; z-index:2; padding:7px 15px; border-radius:100px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:#fff; background:rgba(28,23,20,.5); backdrop-filter:blur(6px); transition:opacity .3s;
}
.oynat.gizli ~ .video-sure{opacity:0}

/* ---------- NEDEN ---------- */
.neden-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(26px,3.4vw,52px)}
.neden-grid article{border-top:1px solid var(--krem-2); padding-top:28px}
.neden-grid b{display:block; font-family:var(--serif); font-size:42px; line-height:1; color:rgba(201,169,110,.55); margin-bottom:16px; font-weight:400}
.neden-grid h3{font-size:24px; margin-bottom:12px}
.neden-grid p{font-size:14.5px; color:var(--soluk); max-width:46ch}

/* ---------- GALERİ ---------- */
.gal{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(10px,1.2vw,18px)}
.gal-i{position:relative; padding:0; border-radius:4px; overflow:hidden; aspect-ratio:1/1; background:var(--krem); cursor:zoom-in}
.gal-i:first-child{grid-column:span 2; grid-row:span 2}
.gal-i img,.gal-i video{width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--e-out), filter .5s}
.gal-i:hover img,.gal-i:hover video{transform:scale(1.06); filter:brightness(1.04)}

/* video karesi: köşede küçük oynat işareti */
.gal-video{cursor:pointer}
.gal-oynat{
  position:absolute; left:14px; bottom:14px; z-index:2; width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.9); display:grid; place-items:center; pointer-events:none;
  box-shadow:0 6px 18px -8px rgba(24,20,17,.7);
}
.gal-oynat::after{
  content:''; width:0; height:0; margin-left:3px;
  border-left:10px solid var(--koyu); border-top:6.5px solid transparent; border-bottom:6.5px solid transparent;
}

/* büyütme kutusunda video */
.kutu video{max-width:min(560px,92vw); max-height:86vh; object-fit:contain; border-radius:3px; background:#000}
.gal-not{margin-top:28px; font-size:14px; color:var(--soluk)}
.gal-not a{color:var(--gold-koyu); border-bottom:1px solid rgba(169,136,76,.4)}

.kutu{
  position:fixed; inset:0; z-index:10005; background:rgba(24,20,17,.93);
  display:flex; align-items:center; justify-content:center; padding:24px; opacity:0;
  transition:opacity .3s; backdrop-filter:blur(6px);
}
.kutu.acik{opacity:1}
.kutu img{max-width:min(1100px,92vw); max-height:86vh; object-fit:contain; border-radius:3px}
.kutu-kapat{position:absolute; top:18px; right:22px; width:46px; height:46px; border-radius:50%; color:#fff; font-size:30px; line-height:1; background:rgba(255,255,255,.12)}
.kutu-kapat:hover{background:rgba(255,255,255,.24)}
.kutu-ok{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:52px; height:52px;
  border-radius:50%; color:#fff; font-size:34px; line-height:1; background:rgba(255,255,255,.12);
  display:flex; align-items:center; justify-content:center; transition:background .3s;
}
.kutu-ok:hover{background:rgba(255,255,255,.26)}
.kutu-sol{left:20px; padding-right:3px}
.kutu-sag{right:20px; padding-left:3px}
.kutu-sayac{position:absolute; left:0; right:0; bottom:22px; text-align:center; color:rgba(255,255,255,.6); font-family:var(--mono); font-size:11px; letter-spacing:.16em}

/* ---------- İSMİMİZ ----------
   Üç kök kutusu ortada, aralarında altın + ve = işareti. Dar ekranda kutular
   alt alta geçer, işaretler aralarında kalır. */
.isim{background:var(--krem); max-width:none}
.isim > *{max-width:var(--en); margin-left:auto; margin-right:auto}
.isim-bas{text-align:center; max-width:56ch}
.isim-bas .etiket{justify-content:center}
.isim-bas .bolum-alt{max-width:46ch; margin-left:auto; margin-right:auto}

.isim-kokler{
  display:flex; flex-wrap:wrap; align-items:stretch; justify-content:center;
  gap:clamp(10px,1.6vw,20px); margin-bottom:clamp(32px,4vw,56px);
}
.isim-kok{
  flex:1 1 210px; max-width:290px; text-align:center;
  padding:clamp(26px,2.8vw,38px) clamp(18px,2vw,26px);
  background:var(--beyaz); border:1px solid var(--krem-2); border-radius:7px;
  box-shadow:var(--golge);
}
.isim-dil{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--soluk); margin-bottom:14px;
}
.isim-kelime{
  font-family:var(--serif); font-style:italic; font-size:clamp(30px,3.2vw,42px);
  line-height:1; color:var(--koyu); margin-bottom:12px;
}
.isim-anlam{font-size:13.5px; line-height:1.6; color:var(--metin)}

.isim-kok-vurgu{background:var(--koyu); border-color:var(--koyu)}
.isim-kok-vurgu .isim-dil{color:var(--gold)}
.isim-kok-vurgu .isim-kelime{color:#fff; font-style:normal; letter-spacing:.01em}
.isim-kok-vurgu .isim-anlam{color:rgba(255,255,255,.76)}

.isim-isaret{
  flex:none; align-self:center;
  font-family:var(--serif); font-size:clamp(22px,2.4vw,32px); color:var(--gold-koyu);
}

.isim-metin{max-width:60ch; text-align:center}
.isim-metin p{font-size:clamp(15px,1.35vw,17px); line-height:1.85; color:var(--metin); margin-bottom:16px}
.isim-metin b{font-family:var(--serif); font-style:italic; font-weight:400; font-size:1.12em; color:var(--koyu)}
.isim-kapanis{
  margin-top:clamp(20px,2.6vw,32px); padding-top:clamp(20px,2.6vw,32px);
  border-top:1px solid var(--krem-2);
  font-family:var(--serif); font-size:clamp(24px,2.9vw,40px) !important;
  line-height:1.25 !important; color:var(--koyu) !important;
}
.isim-kapanis em{font-style:italic; color:var(--gold-koyu)}

@media (max-width:720px){
  .isim-kok{flex:1 1 100%; max-width:none}
}

/* ---------- YOLCULUK: ÇİZİM KARTLARI ----------
   Altı adım, altı kart. Kartlar 3B olarak yerine oturur (masaüstünde yandan,
   telefonda yukarıdan — yerleşim yönüyle aynı), içlerindeki figürler kendi
   kendine oynar. Kart oranı 4/5, SVG viewBox 400×500 — ikisi aynı olmalı,
   yoksa "slice" çizimin kenarını kırpar. */
.ks-tanim{position:absolute; width:0; height:0; overflow:hidden}

.ks-izgara{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,1.7vw,22px);
  perspective:1700px; perspective-origin:50% 40%;
}
.ks{
  position:relative; overflow:hidden; aspect-ratio:4/5;
  border-radius:9px; background:var(--beyaz); box-shadow:var(--golge);
  will-change:transform;
}
.ks-svg{position:absolute; inset:0; width:100%; height:100%}
.ks-koyu{background:#151110}

/* köşedeki numaralı açıklama */
.sh-yazi{
  position:absolute; z-index:3; left:0; right:0; bottom:0;
  padding:clamp(16px,1.7vw,22px) clamp(18px,1.9vw,24px);
  display:flex; flex-wrap:wrap; align-items:baseline; gap:3px 9px;
  font-family:var(--serif); font-size:clamp(19px,1.6vw,24px); line-height:1.15; color:var(--koyu);
  background:linear-gradient(0deg,rgba(251,248,244,.97) 46%,rgba(251,248,244,0));
}
.sh-yazi b{
  font-family:var(--mono); font-weight:400; font-size:10px; letter-spacing:.2em;
  color:var(--gold-koyu); align-self:center;
}
.sh-yazi span{
  flex:1 0 100%; font-family:var(--sans); font-size:11.5px; line-height:1.5;
  color:var(--soluk); letter-spacing:.01em;
}
.sh-yazi-koyu{
  color:#fff;
  background:linear-gradient(0deg,rgba(15,12,11,.97) 46%,rgba(15,12,11,0));
}
.sh-yazi-koyu b{color:var(--gold)}
.sh-yazi-koyu span{color:rgba(255,255,255,.66)}

/* SVG içi yazılar */
.sh-tabela{font-family:var(--serif); font-size:22px; letter-spacing:.16em; fill:#E8D3A8; text-anchor:middle}
.sh-vitrin{font-size:13px; fill:#C9A96E; text-anchor:middle}

/* --- kendi başına dönen küçük hareketler --- */
/* yürüyüş: bacaklar dönüşümlü salınır, gövde hafifçe zıplar */
.sh-bacak{transform-box:fill-box; transform-origin:50% 0}
.sh-bacak-a{animation:sh-adim-a .62s ease-in-out infinite}
.sh-bacak-b{animation:sh-adim-b .62s ease-in-out infinite}
.sh-kol{transform-box:fill-box; transform-origin:50% 0; animation:sh-adim-b .62s ease-in-out infinite}
.sh-govde{animation:sh-zipla .31s ease-in-out infinite alternate}
@keyframes sh-adim-a{0%,100%{transform:rotate(16deg)}50%{transform:rotate(-16deg)}}
@keyframes sh-adim-b{0%,100%{transform:rotate(-16deg)}50%{transform:rotate(16deg)}}
@keyframes sh-zipla{to{transform:translateY(-2px)}}

/* sokak lambası ve cihaz ışığı nefes alır */
.sh-lamba{animation:sh-nefes 3.4s ease-in-out infinite}
.sh-cihaz{transform-box:fill-box; transform-origin:50% 50%; animation:sh-nefes 2.1s ease-in-out infinite}
@keyframes sh-nefes{0%,100%{opacity:.55}50%{opacity:1}}

/* uzmanın kolu uygulama yaparken hafifçe gidip gelir */
.sh-kol-uzman{transform-box:fill-box; transform-origin:8% 80%; animation:sh-uygula 3.2s ease-in-out infinite}
@keyframes sh-uygula{0%,100%{transform:rotate(0deg)}50%{transform:rotate(-3.4deg)}}

/* göz kırpma */
.sh-goz{transform-box:fill-box; transform-origin:50% 50%; animation:sh-kirp 5.2s ease-in-out infinite}
@keyframes sh-kirp{0%,95%,100%{transform:scaleY(1)}97%{transform:scaleY(.1)}}

/* ışıltılar sırayla parlar */
.sh-yildiz{transform-box:fill-box; transform-origin:50% 50%; animation:sh-parla 2.6s ease-in-out infinite}
.sh-y2{animation-delay:.5s}.sh-y3{animation-delay:1s}.sh-y4{animation-delay:1.5s}.sh-y5{animation-delay:2s}
@keyframes sh-parla{0%,100%{opacity:0; transform:scale(.4)}45%{opacity:.95; transform:scale(1)}}

/* JS'in sürdüğü parçalar: dönüş merkezleri burada sabitlenir */
.sh-kapi{transform-box:fill-box; transform-origin:100% 50%}
.ks-balon,.ks-onay,.ks-analiz,.ks-nokta,.ks-tik{transform-box:fill-box; transform-origin:50% 50%}
.ks-ilerleme,.ks-cizgi{transform-box:fill-box; transform-origin:0% 50%}

/* ---------- HİZMET DİZİNİ (kartların altındaki koyu şerit) ---------- */
.dizin{
  margin-top:clamp(26px,3vw,42px);
  display:grid; grid-template-columns:minmax(200px,1fr) 2.4fr;
  gap:clamp(24px,3vw,52px);
  padding:clamp(30px,3.4vw,48px);
  background:var(--koyu); border-radius:9px; box-shadow:var(--golge);
}
.dizin-logo{width:min(178px,84%); height:auto; margin-bottom:20px}
.dizin-baslik{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--gold); margin-bottom:8px;
}
.dizin-alt{
  font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.45);
}
.dizin-liste{columns:3; column-gap:26px; align-self:center}
.dizin-liste li{
  font-size:12.5px; line-height:25px; break-inside:avoid; position:relative; padding-left:12px;
  color:rgba(255,255,255,.8);
}
/* 1px çizgi yerine nokta: hairline, ekran piksel oranına göre kimi satırda
   koyu kimi satırda soluk çıkıyordu; daire her oranda aynı görünüyor */
.dizin-liste li::before{
  content:''; position:absolute; left:1px; top:11px; width:3px; height:3px;
  border-radius:50%; background:var(--gold);
}

@media (max-width:1080px){
  .ks-izgara{grid-template-columns:repeat(2,1fr)}
  .dizin-liste{columns:2}
}
@media (max-width:680px){
  .ks-izgara{grid-template-columns:1fr; perspective:1100px}
  .dizin{grid-template-columns:1fr; gap:26px}
  .dizin-logo{width:min(160px,60%)}
}
@media (max-width:380px){ .dizin-liste{columns:1} }

@media (prefers-reduced-motion:reduce){
  .sh-bacak,.sh-kol,.sh-govde,.sh-lamba,.sh-cihaz,.sh-kol-uzman,.sh-goz,.sh-yildiz{animation:none}
  .sh-yildiz{opacity:.85}
  .ks{transform:none !important}
}

/* ---------- DİJİTAL KARTVİZİT ---------- */
.kartvizit-alan{margin-top:clamp(40px,5vw,72px); padding-top:clamp(36px,4.5vw,60px); border-top:1px solid var(--krem-2); text-align:center}
.kartvizit{
  width:min(420px,92%); margin:0 auto; aspect-ratio:1.66/1;
  perspective:1400px; cursor:pointer;
}
.kv-ic{
  position:relative; width:100%; height:100%;
  -webkit-transform-style:preserve-3d; transform-style:preserve-3d;
  transition:transform .9s var(--e-out);
}
/* Dönük hâl: masaüstünde imleç/odak, dokunmatikte JS'in verdiği .donuk sınıfı.
   :hover yalnız gerçek imleçli cihazda — dokunmatikte dokunulan öğe "hover"
   takılı kalıp kart geri dönmüyordu. */
.kartvizit:focus-visible .kv-ic,.kartvizit.donuk .kv-ic{transform:rotateY(180deg)}
@media (hover:hover){ .kartvizit:hover .kv-ic{transform:rotateY(180deg)} }

/* backface-visibility tek başına yetmiyor: iOS Safari'de yüzlerin içindeki
   z-index'li öğeler (logo, halka) arkadan sızıp arka yüzün yazılarıyla
   çakışıyordu. Bu yüzden görünmeyen yüz ayrıca gizleniyor — dönüşün yarısında
   devreye girsin diye gecikmeli. */
.kv-yuz{
  transition:opacity .2s linear .34s, visibility 0s linear .45s;
}
.kv-arka{opacity:0; visibility:hidden}
.kartvizit:focus-visible .kv-on,.kartvizit.donuk .kv-on{opacity:0; visibility:hidden}
.kartvizit:focus-visible .kv-arka,.kartvizit.donuk .kv-arka{opacity:1; visibility:visible}
@media (hover:hover){
  .kartvizit:hover .kv-on{opacity:0; visibility:hidden}
  .kartvizit:hover .kv-arka{opacity:1; visibility:visible}
}

.kv-yuz{
  position:absolute; inset:0; border-radius:10px;
  -webkit-backface-visibility:hidden; backface-visibility:hidden;
  background:linear-gradient(150deg,#2A2320,#151110);
  box-shadow:0 26px 60px -34px rgba(24,20,17,.85);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:clamp(20px,3vw,30px); text-align:center; overflow:hidden;
}
.kv-on img{width:min(180px,58%); height:auto; position:relative; z-index:2}
/* Altın halka: sabit piksel yerine kartın yüksekliğine oranlı. Sabitken küçük
   kalıyor, logo ve altındaki yazı halkanın dışına taşıyordu. Ayrıca kartın tam
   ortasına konumlanıyor — akıştaki yerinde bırakılınca yukarı kayıyordu. */
.kv-halka{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  height:90%; aspect-ratio:1; border-radius:50%;
  border:1px solid rgba(201,169,110,.55);
}
.kv-alt{
  position:relative; z-index:2; margin-top:14px; font-family:var(--mono);
  font-size:9.5px; letter-spacing:.24em; text-transform:uppercase; color:rgba(201,169,110,.9);
}
.kv-on{-webkit-transform:translateZ(1px); transform:translateZ(1px)}
.kv-arka{
  -webkit-transform:rotateY(180deg) translateZ(1px); transform:rotateY(180deg) translateZ(1px);
  align-items:flex-start; justify-content:center; text-align:left;
}
.kv-ad{font-family:var(--serif); font-size:22px; color:#fff; line-height:1.22}
/* iki ortak alt alta: aradaki "&" ince altın bir ayraç */
.kv-ad span{
  display:inline-block; margin:0 7px; font-family:var(--mono); font-size:11px;
  color:var(--gold); vertical-align:2px;
}
.kv-unvan{margin-top:5px; font-size:11px; letter-spacing:.08em; color:rgba(201,169,110,.9)}
.kv-cizgi{width:38px; height:1px; background:var(--gold); margin:14px 0}
.kv-bilgi{display:grid; gap:7px; width:100%}
.kv-bilgi li{display:flex; gap:10px; align-items:flex-start; font-size:11.5px; line-height:1.45; color:rgba(255,255,255,.8)}
.kv-bilgi b{
  flex:none; width:16px; font-family:var(--mono); font-size:9.5px; color:var(--gold);
  letter-spacing:.06em; padding-top:1px;
}
.kv-bilgi a:hover{color:#fff}
.kartvizit-not{margin-top:16px; font-size:12.5px; color:var(--soluk)}

/* Dar ekranda arka yüzdeki dört satır kartı taşırıyordu: kart biraz yükseliyor,
   yazılar küçülüyor, uzun e-posta satırı kırılabiliyor. */
@media (max-width:560px){
  /* telefonda kart biraz daha yüksek: hem arka yüzdeki dört satır rahatlıyor
     hem de altın halka logoyu ve altındaki yazıyı içine alacak kadar büyüyor */
  .kartvizit{width:100%; aspect-ratio:1.45/1}
  .kv-yuz{padding:18px 20px}
  .kv-on img{width:52%}
  /* halkanın içinde en geniş öğe logo değil, altındaki bu yazı; harf aralığı
     dar ekranda kısılınca satır halkanın içinde rahat kalıyor */
  .kv-alt{font-size:9px; letter-spacing:.15em; margin-top:12px}
  .kv-ad{font-size:19px}
  .kv-unvan{font-size:10px; letter-spacing:.04em}
  .kv-cizgi{margin:10px 0}
  .kv-bilgi{gap:5px}
  .kv-bilgi li{font-size:10.5px; line-height:1.4}
  .kv-bilgi a,.kv-bilgi span{min-width:0; overflow-wrap:anywhere}
}

/* ---------- YORUMLAR ---------- */
/* puan özeti */
.yorum-puan{display:flex; align-items:center; gap:18px; margin-bottom:clamp(26px,3vw,38px)}
.yorum-puan > b{font-family:var(--serif); font-size:clamp(44px,5vw,64px); line-height:1; color:var(--koyu); font-weight:400}
.yorum-puan .yorum-yildiz{display:block; margin-bottom:4px}
.yorum-adet{font-size:13px; color:var(--soluk); letter-spacing:.02em}

/* 4 yorum: uzunlukları eşit olmadığı için iki sütun daha dengeli duruyor */
.yorum-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(18px,2.4vw,30px); margin-bottom:clamp(28px,3.5vw,44px)}
.yorum{
  margin:0; background:var(--beyaz); border:1px solid var(--krem-2); border-radius:6px;
  padding:30px 28px; display:flex; flex-direction:column;
}
.yorum-yildiz{color:var(--gold); font-size:14px; letter-spacing:.18em; margin-bottom:16px}
.yorum blockquote{margin:0 0 20px; font-family:var(--serif); font-size:18.5px; line-height:1.55; color:var(--koyu); flex:1}
.yorum figcaption{font-size:12.5px; letter-spacing:.06em; color:var(--soluk)}
.yorum figcaption b{display:block; font-weight:500; color:var(--koyu); font-size:14px; letter-spacing:0; margin-bottom:3px}

.yorum-cta{
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  background:var(--krem); border:1px solid var(--krem-2); border-radius:6px;
  padding:clamp(24px,3vw,36px);
}
.yorum-cta-yazi b{display:block; font-family:var(--serif); font-size:clamp(20px,2.2vw,26px); font-weight:400; color:var(--koyu); margin-bottom:7px}
.yorum-cta-yazi span{font-size:14px; color:var(--soluk)}
.yorum-cta-btn{display:flex; gap:12px; flex-wrap:wrap}

@media (max-width:900px){
  .yorum-grid{grid-template-columns:1fr}
  .yorum-cta{flex-direction:column; align-items:flex-start}
  .yorum-cta-btn .btn{flex:1 1 auto}
}

/* ---------- SIK SORULANLAR ---------- */
.sss-liste{max-width:900px}
.sss-liste details{border-top:1px solid var(--krem-2)}
.sss-liste details:last-child{border-bottom:1px solid var(--krem-2)}
.sss-liste summary{
  list-style:none; cursor:pointer; padding:clamp(20px,2.4vw,28px) 46px clamp(20px,2.4vw,28px) 0;
  position:relative; font-family:var(--serif); font-size:clamp(19px,2.1vw,26px); color:var(--koyu);
  transition:color .35s;
}
.sss-liste summary::-webkit-details-marker{display:none}
.sss-liste summary:hover{color:var(--gold-koyu)}
.sss-liste summary::after{
  content:''; position:absolute; right:8px; top:50%; width:13px; height:13px; margin-top:-7px;
  border-right:1px solid var(--gold-koyu); border-bottom:1px solid var(--gold-koyu);
  transform:rotate(45deg); transition:transform .4s var(--e-out);
}
.sss-liste details[open] summary::after{transform:rotate(-135deg)}
.sss-cevap{padding:0 46px 26px 0; animation:sssAc .45s var(--e-out)}
.sss-cevap p{font-size:15px; color:var(--soluk); max-width:62ch}
@keyframes sssAc{from{opacity:0; transform:translateY(-8px)} to{opacity:1; transform:none}}

/* ---------- RANDEVU ---------- */
.randevu{background:var(--krem); border-block:1px solid var(--krem-2)}
.rnd-in{max-width:var(--en); margin:0 auto; padding:var(--bosluk) var(--pad); display:grid; grid-template-columns:1fr 1.02fr; gap:clamp(36px,5vw,86px); align-items:start}
.rnd-yazi > p{color:var(--metin); max-width:44ch; margin-top:22px}

/* hazır WhatsApp mesajları */
.wa-hazir{margin-top:38px; padding:26px 26px 22px; background:var(--beyaz); border:1px solid var(--krem-2); border-radius:6px}
.wa-baslik{font-family:var(--mono); font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-koyu); margin-bottom:16px}
.wa-cipler{display:flex; flex-wrap:wrap; gap:9px}
.cip{
  display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:100px;
  border:1px solid var(--krem-2); background:var(--kagit); font-size:13px; color:var(--koyu);
  transition:background .35s, border-color .35s, color .35s, transform .35s var(--e-out);
}
.cip::before{content:''; width:7px; height:7px; border-radius:50%; background:var(--wa); flex:none}
.cip:hover{background:var(--wa); border-color:var(--wa); color:#fff; transform:translateY(-2px)}
.wa-not{margin-top:14px; font-size:12.5px; color:var(--soluk); line-height:1.5}

.rnd-bilgi{margin-top:34px; display:grid; gap:20px}
.rnd-bilgi li{border-top:1px solid var(--krem-2); padding-top:15px}
.rnd-bilgi b{display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-koyu); margin-bottom:7px}
.rnd-bilgi span,.rnd-bilgi a{font-size:15px; color:var(--koyu); line-height:1.55}
.rnd-bilgi a:hover{color:var(--gold-koyu)}
.rnd-not{display:block; margin-top:9px; font-style:normal; font-size:13px; line-height:1.5; color:var(--soluk)}

.rnd-form{background:var(--beyaz); border:1px solid var(--krem-2); border-radius:6px; padding:clamp(26px,3.2vw,46px); box-shadow:var(--golge)}
.f-sat{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.f-g{margin-bottom:20px}
.f-g label{display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--soluk); margin-bottom:9px}
.f-g label i{font-style:normal; text-transform:none; letter-spacing:0; opacity:.75}
.f-g input,.f-g select,.f-g textarea{
  width:100%; padding:14px 16px; font-size:15px; color:var(--koyu); background:var(--kagit);
  border:1px solid var(--krem-2); border-radius:4px;
  transition:border-color .3s, background .3s, box-shadow .3s;
}
.f-g textarea{resize:vertical; min-height:92px}
.f-g input:focus,.f-g select:focus,.f-g textarea:focus{outline:none; border-color:var(--gold); background:#fff; box-shadow:0 0 0 3px rgba(201,169,110,.16)}
.f-hata{display:none; font-style:normal; font-size:12.5px; color:#B4433A; margin-top:6px}
.f-g.hata input,.f-g.hata select{border-color:#B4433A; background:#FEF6F5}
.f-g.hata .f-hata,.f-onay.hata .f-hata{display:block}
.f-onay{display:flex; flex-wrap:wrap; gap:11px; align-items:flex-start; margin:4px 0 24px; cursor:pointer}
.f-onay input{width:18px; height:18px; margin-top:3px; accent-color:var(--gold-koyu); flex:none}
.f-onay span{flex:1; font-size:13.5px; color:var(--soluk); line-height:1.55}
.f-onay a{color:var(--gold-koyu); border-bottom:1px solid rgba(169,136,76,.4)}
.f-onay .f-hata{flex-basis:100%}
#f-hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
.f-uyari{display:none; margin-top:16px; padding:13px 16px; border-radius:4px; background:#FDF4E7; border:1px solid #E8D2A8; color:#7A5A21; font-size:13.5px}
.f-uyari.gor{display:block}
.f-alt{margin-top:16px; font-size:12.5px; color:var(--soluk); text-align:center}
.f-alt a{color:var(--gold-koyu); border-bottom:1px solid rgba(169,136,76,.4)}
.f-ok{text-align:center; padding:26px 0}
.f-ok i{display:block; width:62px; height:62px; margin:0 auto 24px; border-radius:50%; background:var(--gold); position:relative}
.f-ok i::after{content:''; position:absolute; left:22px; top:17px; width:14px; height:26px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg)}
.f-ok h3{font-size:30px; margin-bottom:12px}
.f-ok p{font-size:14.5px; color:var(--soluk); max-width:40ch; margin:0 auto}
.f-ok a{color:var(--gold-koyu); border-bottom:1px solid rgba(169,136,76,.4)}

/* ---------- İLETİŞİM ---------- */
.ilt-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.6vw,34px)}
.ilt-k{background:var(--beyaz); border:1px solid var(--krem-2); border-radius:6px; padding:32px 30px}
.ilt-k b{display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-koyu); margin-bottom:15px}
.ilt-k p{font-size:15px; color:var(--koyu); line-height:1.65}
.ilt-l{display:inline-block; margin-top:17px; font-size:13px; letter-spacing:.05em; color:var(--gold-koyu); border-bottom:1px solid rgba(169,136,76,.45); padding-bottom:2px}
.ilt-l:hover{border-color:var(--gold-koyu)}

/* ---------- KONUM (havadan çekim) ---------- */
.konum{
  display:grid; grid-template-columns:.62fr 1fr; gap:clamp(28px,4.5vw,64px);
  align-items:center; margin-top:clamp(40px,5vw,72px);
  padding-top:clamp(36px,4.5vw,60px); border-top:1px solid var(--krem-2);
}
.konum-video{
  border-radius:6px; overflow:hidden; box-shadow:var(--golge);
  max-width:330px; width:100%; background:#000;
}
.konum-video video{width:100%; aspect-ratio:9/16; object-fit:cover; display:block}
.konum-yazi h3{font-size:clamp(24px,3vw,38px); line-height:1.08; margin-bottom:16px}
.konum-yazi > p{font-size:15px; color:var(--soluk); max-width:44ch; margin-bottom:26px}

@media (max-width:860px){
  .konum{grid-template-columns:1fr; gap:26px}
  .konum-video{max-width:280px; margin:0 auto}
  .konum-yazi{text-align:left}
}

/* ---------- ALT BİLGİ ---------- */
#footer{background:var(--koyu); color:rgba(255,255,255,.72); padding:clamp(54px,6vw,86px) var(--pad) 32px}
.ft-in{max-width:var(--en); margin:0 auto; display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:38px; align-items:start}
.ft-marka{display:flex; flex-direction:column; align-items:flex-start; gap:16px}
.ft-marka img{height:46px; width:auto}
.ft-marka span{font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.5)}
.ft-nav{display:flex; flex-direction:column; gap:12px}
.ft-nav a{font-size:14px; color:rgba(255,255,255,.72); transition:color .3s}
.ft-nav a:hover{color:var(--gold)}
.ft-alt{max-width:var(--en); margin:48px auto 0; padding-top:24px; border-top:1px solid rgba(255,255,255,.12); font-size:12.5px; color:rgba(255,255,255,.45)}

/* ---------- SABİT RANDEVU DÜĞMESİ (masaüstü) ---------- */
.yuzen{
  position:fixed; right:clamp(18px,2.4vw,40px); bottom:clamp(18px,2.4vw,40px); z-index:88;
  width:104px; height:104px; border-radius:50%; display:none; place-items:center;
  background:var(--koyu); color:#fff; text-align:center;
  opacity:0; transform:scale(.7); pointer-events:none;
  transition:opacity .5s var(--e-out), transform .5s var(--e-out), background .4s;
}
.yuzen.gor{opacity:1; transform:scale(1); pointer-events:auto}
.yuzen:hover{background:var(--gold-koyu)}
.yuzen-yazi{
  position:relative; z-index:2; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.18em; text-transform:uppercase; line-height:1.5;
}
.yuzen-halka{
  position:absolute; inset:6px; border-radius:50%; border:1px solid rgba(201,169,110,.5);
  animation:halka 3.4s var(--e-out) infinite;
}
@keyframes halka{0%{transform:scale(1); opacity:.7}70%{transform:scale(1.18); opacity:0}100%{opacity:0}}
@media (min-width:861px){ .yuzen{display:grid} }
@media (prefers-reduced-motion: reduce){ .yuzen-halka{animation:none} }

/* ---------- MOBİL ALT ÇUBUK ---------- */
.mobar{
  position:fixed; left:0; right:0; bottom:0; z-index:80; display:none;
  background:rgba(251,248,244,.95); backdrop-filter:blur(14px);
  border-top:1px solid var(--krem-2); padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  gap:8px; transform:translateY(110%); transition:transform .45s var(--e-out);
}
.mobar.gor{transform:none}
.mobar a{flex:1; text-align:center; padding:14px 6px; border-radius:100px; font-size:13px; border:1px solid var(--krem-2); color:var(--koyu); background:#fff}
.mobar a[data-wa]{background:var(--wa); border-color:var(--wa); color:#fff}
.mobar-ic{background:var(--koyu) !important; border-color:var(--koyu) !important; color:#fff !important}

/* ---------- DOKUNMATİK ---------- */
@media (hover:none){
  .btn::before{display:none}
  .btn-bos:hover{color:var(--koyu)}
  .gal-i:hover img{transform:none; filter:none}
  .oynat:hover{transform:none}
  .cip:hover{transform:none}
  .btn:active{transform:scale(.97)}
}

/* ---------- HAREKET AZALTMA ---------- */
@media (prefers-reduced-motion: reduce){
  #grain{display:none}
  *{animation-duration:.001ms !important; transition-duration:.001ms !important}
}

/* ============================================================
   DUYARLI
   ============================================================ */
@media (max-width:1080px){
  /* dar ekranda sabitleme yok: parmakla kaydırılan şerit */
  .hz-yapis{height:auto; display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; scroll-snap-type:x mandatory}
  .hz-yapis::-webkit-scrollbar{display:none}
  .hz-ray{transform:none !important; gap:16px}
  .hz-kart{width:min(78vw,380px); scroll-snap-align:center}
  .hz-kart + .hz-kart{margin-left:0}
  .hz-medya img,.hz-medya video{transform:none !important}
  .hz-durum{display:none}
  .kurucu-duzen{grid-template-columns:1fr; gap:40px}
  .kurucu-foto{max-width:460px}
  .kitap{perspective:1400px}
  .serit ul{grid-template-columns:repeat(2,1fr); gap:28px 36px}
  .gal{grid-template-columns:repeat(3,1fr)}
  .gal-i:first-child{grid-column:span 2; grid-row:span 2}
}

@media (max-width:860px){
  .nav-links{display:none}
  .menu-btn{display:flex}
  .nav-cta .btn-ic{display:none}
  .rnd-in{grid-template-columns:1fr}
  .ilt-grid{grid-template-columns:1fr}
  .ft-in{grid-template-columns:1fr; gap:32px}
  .mobar{display:flex}
  main{padding-bottom:78px}
  #imlec,#imlec-halka{display:none}
}

@media (max-width:860px){
  .tanitim-in{grid-template-columns:1fr; gap:32px}
  .tanitim-oynatici{margin:0 auto; max-width:340px}
}

@media (max-width:640px){
  .neden-grid{grid-template-columns:1fr}
  .serit ul{grid-template-columns:1fr}
  .hikaye-sayilar{grid-template-columns:1fr; gap:18px; text-align:left}
  .f-sat{grid-template-columns:1fr; gap:0}
  .hero{min-height:92svh; padding-top:110px}
  .hero-perde{background:linear-gradient(to top, rgba(251,248,244,.97) 24%, rgba(251,248,244,.8) 58%, rgba(251,248,244,.34) 100%)}
  .hero-btn .btn{flex:1 1 100%}
  .hero-kaydir{display:none}
  .gal{grid-template-columns:repeat(2,1fr)}
  .gal-i:first-child{grid-column:span 2; grid-row:span 1; aspect-ratio:4/3}
  .kutu-ok{display:none}
  .f-g input,.f-g select,.f-g textarea{font-size:16px}   /* iOS odakta yakınlaştırmasın */
  .etiket{letter-spacing:.2em; font-size:10px; gap:9px}  /* dar ekranda kenara yapışmasın */
  .serit-ray figure{width:78vw}
}