/* ByKuara ana sayfa — Form Studio vitrini (2026-09-24).
   Önizlemedeki tasarımdan (Tema Stüdyosu / 08) uyarlandı. Farklar:
   - En küçük yazı 11px (önizlemede 6–9px'lik 35 yazı vardı).
   - Başlık (h1) sabit; değişen şiir <p class="siir">. Arama motoru
     sayfanın başlığını kaydırıcıya göre değişen bir metin olarak görmez.
   - Telefonda öğeler üst üste bindirilmez, alt alta akar: metin uzasa
     da satın alma kartı ile düğmeler çakışmaz.
   Renkler tema.css değişkenlerinden gelir. */

/* ── Üst menü: açılışın üstünde saydam ── */
.anasayfa .header{position:absolute;inset:0 0 auto;z-index:20;background:transparent;color:#fff;border-bottom:1px solid #ffffff33}
.anasayfa .header .brand{color:#fff}
.anasayfa .header nav>a{color:#fff}
.anasayfa .header sup{font-size:11px;color:var(--v-acik);margin-left:2px}
.anasayfa .nav-shop{color:#fff;border-color:#ffffff66;background:#ffffff0d;backdrop-filter:blur(12px)}
.anasayfa .nav-shop:hover{background:var(--v-acik);color:var(--t1);border-color:var(--v-acik)}
.anasayfa .header :focus-visible{outline-color:var(--v-acik)}

/* ── Açılış (vitrin) ── */
.exhibit{position:relative;isolation:isolate;overflow:hidden;background:var(--t1);color:#fff;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,290px);grid-template-rows:1fr auto auto;
  column-gap:40px;min-height:max(780px,100svh);max-height:1180px;padding:128px 4% 0}
.photo-stage{position:absolute;inset:0;z-index:-1;background:var(--t1)}
.photo-stage>img{width:100%;height:100%;object-fit:cover;object-position:center 58%;
  filter:brightness(.8);transform:scale(1.02);transition:opacity .35s}
.photo-stage:after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,#111b17cc 0%,#111b1750 43%,transparent 78%),
             linear-gradient(0deg,#101b18ee 0%,transparent 42%,#111b1730 100%)}
.exhibit .gecis{opacity:.35}
.vertical-label{position:absolute;right:31px;top:200px;writing-mode:vertical-rl;font-size:11px;letter-spacing:.3em;color:#ffffffcc}
.zoom{position:absolute;right:20px;top:128px;width:44px;height:44px;border-radius:50%;border:1px solid #ffffff66;
  background:#ffffff14;color:#fff;font-size:22px;backdrop-filter:blur(12px);z-index:2}
.zoom:hover{background:var(--v-acik);color:var(--t1)}

.exhibit-copy{grid-column:1;grid-row:1;align-self:center;max-width:980px;padding:30px 0}
.overline{display:flex;align-items:center;gap:12px;max-width:520px;font-size:11px;letter-spacing:.22em;color:#dbe8cc}
.overline h1{font:500 11px/1.4 var(--govde-yazi);letter-spacing:.22em;text-transform:uppercase;color:#dbe8cc;margin:0}
.live-dot{width:7px;height:7px;border-radius:50%;background:#d1e6aa;flex:0 0 auto}
.siir{font:500 clamp(72px,8.6vw,150px)/.98 var(--baslik-yazi);letter-spacing:-.075em;color:#fff;margin:48px 0 26px;text-shadow:0 2px 25px #0002}
.siir em{font-family:var(--vurgu-yazi);font-style:italic;font-weight:400;letter-spacing:-.06em;color:var(--v-acik)}
.alt-yazi{font-size:15px;line-height:1.75;color:#e1e7dd;max-width:420px}

.exhibit-alt{grid-column:1;grid-row:2;display:flex;align-items:flex-end;gap:40px;padding-bottom:34px}
.specimen{display:flex;align-items:center;gap:22px;color:#d8dfd5}
.specimen>span:first-child{font:400 26px var(--baslik-yazi);letter-spacing:-.03em}
.specimen>span:last-child{font-size:11px;letter-spacing:.14em;line-height:1.7}
.exhibit-controls{display:flex;gap:12px;margin-left:auto;margin-right:6%}
.exhibit-controls button{width:50px;height:50px;border-radius:50%;border:1px solid #ffffff66;background:#ffffff0d;
  color:#fff;font-size:21px;backdrop-filter:blur(15px);transition:background .2s,color .2s}
.exhibit-controls button:hover{background:var(--v-acik);color:var(--t1)}

.purchase{grid-column:2;grid-row:1/3;align-self:end;margin-bottom:34px;padding:22px;border-radius:16px;
  background:#ffffff14;border:1px solid #ffffff55;color:#fff;backdrop-filter:blur(25px)}
.purchase-etiket{display:block;font-size:11px;letter-spacing:.2em;color:#dbe8cc}
.purchase h2{font:500 26px/1.15 var(--baslik-yazi);letter-spacing:-.04em;margin:10px 0 20px}
.purchase h2 a:hover{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
#buy{display:flex;justify-content:space-between;align-items:center;gap:15px;border-top:1px solid #ffffff44;padding-top:17px}
#buy>span{font-size:19px}
#buy b{font-weight:500;font-size:12px;letter-spacing:.04em;border-bottom:1px solid;padding-bottom:3px}
#buy:hover b{color:var(--v-acik)}

.exhibit-rail{grid-column:1/-1;grid-row:3;position:relative;z-index:0;display:grid;grid-template-columns:1fr auto;align-items:center;gap:16px;padding:20px 0 26px}
/* Şeridin zemini açılışın bir kenarından öbürüne uzanır (taşan kısmı .exhibit kırpar) */
.exhibit-rail:before{content:"";position:absolute;top:0;bottom:0;left:-100vw;right:-100vw;z-index:-1;border-top:1px solid #ffffff40;background:#16211b40;backdrop-filter:blur(18px)}
.exhibit-rail>a{font-size:11px;letter-spacing:.18em;white-space:nowrap;color:#fff}
#scene-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;max-width:980px}
#scene-tabs button{display:flex;align-items:center;gap:12px;height:92px;padding:9px;border-radius:10px;text-align:left;
  background:#ffffff08;border:1px solid #ffffff26;color:#fff;transition:background .2s,border-color .2s}
#scene-tabs button img{width:62px;height:70px;object-fit:cover;border-radius:6px;flex:0 0 auto}
#scene-tabs button span{font-size:13px;line-height:1.4;font-weight:500}
#scene-tabs button small{display:block;font-size:11px;font-weight:400;color:#bcc8b5;letter-spacing:.12em;margin-bottom:5px}
#scene-tabs button[aria-pressed=true]{border-color:var(--v-acik);background:#dae8b824}
#scene-tabs button:hover{background:#ffffff1f}
.exhibit :focus-visible{outline:2px solid var(--v-acik);outline-offset:4px}

/* ── Bakış açımız ── */
.statement{padding:120px 8%;background:var(--t12)}
.statement h2{font-size:clamp(50px,6.1vw,96px);letter-spacing:-.065em;line-height:1.04;margin:38px 0 56px}
.statement h2 em{color:var(--v2)}
.statement-bottom{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px;align-items:center}
.statement-bottom p{font-size:15px;line-height:1.9;color:var(--t4)}
.statement-bottom p>span{display:block}
.statement-bottom .text-link{margin-top:14px;gap:24px}
.asterisk{font:120px/1 var(--vurgu-yazi);color:var(--v3)}

/* ── Form arşivi ── */
.archive{background:var(--t10);color:var(--t1);padding:96px 5% 90px}
.archive-title{display:grid;grid-template-columns:1fr 2fr 1fr;gap:25px;align-items:start;padding-bottom:60px}
.archive-title h2{font-size:clamp(42px,4.1vw,58px);letter-spacing:-.05em;line-height:1.07}
.archive-title p{font-size:14px;line-height:1.8;color:var(--t5)}
#archive-list{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:56px 26px}
.archive-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;row-gap:8px;align-content:start;grid-column:span 4;min-width:0}
.archive-row:nth-child(1),.archive-row:nth-child(2),.archive-row:nth-child(6),.archive-row:nth-child(7){grid-column:span 6}
.archive-row:nth-child(2){padding-top:90px}
.archive-row:nth-child(7){padding-top:80px}
.archive-row img{grid-column:1/-1;grid-row:1;width:100%;height:auto;aspect-ratio:1/.95;object-fit:cover;border-radius:3px;background:var(--t9);transition:filter .3s}
.archive-row:nth-child(6) img{aspect-ratio:1.35}
.archive-row:hover img{filter:brightness(.9)}
.archive-row h3{grid-column:1;grid-row:2;font:500 24px/1.2 var(--baslik-yazi);letter-spacing:-.04em;margin:12px 0 0}
.archive-row .category{grid-column:1/-1;grid-row:3;font-size:12px;letter-spacing:.1em;color:var(--t5);text-transform:uppercase}
.archive-row .arrow{grid-column:2;grid-row:2;align-self:end;font-size:24px;line-height:1.2}
.archive-row:hover h3{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.arsiv-tumu{margin-top:64px;gap:40px}

/* ── Fotoğraf büyütme ── */
#lightbox{padding:0;border:0;background:#141a16;color:#fff;width:min(960px,95vw);max-height:95dvh}
#lightbox::backdrop{background:#000c}
#lightbox img{display:block;width:100%;max-height:85dvh;object-fit:contain}
#close-zoom{display:block;margin:10px 15px 10px auto;background:transparent;color:#fff;border:0;padding:10px;font-size:14px}

@media(min-width:1600px){
  .exhibit,.archive{margin-inline:calc(50% - 50vw)}
  .exhibit{padding-inline:calc(50vw - 50% + 4%)}
  .archive{padding-inline:calc(50vw - 50% + 5%)}
  /* büyütme düğmesi ve dikey yazı içerik sütununun hemen dışında kalsın */
  .zoom{right:calc(50vw - 950px + 20px)}
  .vertical-label{right:calc(50vw - 950px + 31px)}
}
@media(max-width:1100px) and (min-width:801px){
  #scene-tabs button img{width:44px;height:58px}
  #scene-tabs button span{font-size:12px}
  .exhibit-rail>a{display:none}
  .exhibit-rail{grid-template-columns:1fr}
}

@media(max-width:800px){
  /* Telefonda üst menü açılınca kâğıt zeminli panel: yazı koyu */
  .anasayfa .header nav.open{background:var(--t12);color:var(--t1)}
  .anasayfa .header nav.open>a{color:var(--t1)}
  .anasayfa .header nav.open sup{color:var(--v4)}
  .anasayfa .header nav.open .nav-shop{color:var(--t1);border-color:#18231e40;background:transparent}
  .anasayfa .menu-toggle{color:#fff}

  .exhibit{display:flex;flex-direction:column;min-height:0;max-height:none;padding:118px 6% 0}
  .photo-stage>img{object-position:60% center}
  .photo-stage:after{background:linear-gradient(90deg,#102017b0,transparent),linear-gradient(0deg,#102017f2 0%,#10201799 45%,#10201744 100%)}
  .vertical-label{display:none}
  .zoom{top:96px;right:6%;width:40px;height:40px;font-size:19px}
  /* Masaüstündeki align-self:center (dikey ortalama) sütun düzeninde metni
     yatayda ortalıyordu: açılış yazıları alttaki satırlardan içeride kalıyordu */
  .exhibit-copy{align-self:stretch;padding:22px 0 0}
  .overline{max-width:none;padding-right:48px;letter-spacing:.14em}
  .overline h1{letter-spacing:.14em}
  .siir{font-size:clamp(58px,16vw,92px);margin:34px 0 20px}
  .alt-yazi{font-size:14px;max-width:290px}
  .exhibit-alt{padding:44px 0 18px;gap:16px}
  .specimen{gap:14px}
  .specimen>span:first-child{font-size:21px}
  .exhibit-controls{margin-right:0}
  .exhibit-controls button{width:42px;height:42px;font-size:18px}
  .purchase{align-self:stretch;margin:0 0 18px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:16px;padding:16px 18px}
  .purchase-etiket{grid-column:1;grid-row:1}
  .purchase h2{grid-column:1;grid-row:2}
  #buy{grid-column:2;grid-row:1/3}
  .purchase h2{font-size:21px;margin:6px 0 0}
  #buy{flex-direction:column;align-items:flex-end;border:0;padding:0;gap:8px;flex:0 0 auto}
  #buy>span{font-size:17px}
  .exhibit-rail{grid-template-columns:1fr;padding:14px 0 18px}
  .exhibit-rail>a{display:none}
  #scene-tabs{gap:8px}
  #scene-tabs button{display:block;height:auto;padding:5px;overflow:hidden}
  #scene-tabs button img{width:100%;height:62px;border-radius:5px}
  #scene-tabs button span{display:block;font-size:11px;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #scene-tabs button small{display:none}

  .statement{padding:70px 6%}
  .statement h2{font-size:clamp(40px,11vw,52px);margin:26px 0 34px}
  .statement-bottom{grid-template-columns:1fr;gap:18px}
  .statement-bottom p>span{display:inline}
  .asterisk{font-size:64px}

  .archive{padding:64px 5% 60px}
  .archive-title{grid-template-columns:1fr;gap:18px;padding-bottom:36px}
  .archive-title h2{font-size:41px}
  #archive-list{grid-template-columns:1fr 1fr;gap:30px 14px}
  .archive-row,.archive-row:nth-child(n){grid-column:span 1;padding-top:0}
  .archive-row:first-child{grid-column:1/-1}
  .archive-row img,.archive-row:nth-child(n) img{aspect-ratio:1/.95}
  .archive-row h3{font-size:17px;letter-spacing:-.02em}
  .archive-row .category{font-size:11px;letter-spacing:.06em}
  .archive-row .arrow{font-size:18px}
  .arsiv-tumu{margin-top:44px;gap:20px}
}

@media(prefers-reduced-motion:reduce){
  .photo-stage>img,.exhibit-controls button,#scene-tabs button{transition:none}
}