/* ==========================================================
   Teatropia — marka stil sayfası
   Siyah zemin, ince çerçeve, harf aralıklı tipografi, amber vurgu
   ========================================================== */

:root{
  --siyah:#0A0A0A;
  --koyu:#141414;
  --koyu-2:#1C1C1C;
  --beyaz:#FAFAF7;
  --gri:#CCCCCC;
  --soluk:#ADADAD;
  --amber:#E8B451;
  --cizgi:rgba(250,250,247,.14);
  --cizgi-guclu:rgba(250,250,247,.30);
  --en:1180px;
  --gecis:.28s cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;   /* iOS yatay çevirince yazıyı şişirmesin */
}
body{
  margin:0;
  overflow-x:hidden;               /* yatay kaydırma güvenliği */
  background:var(--siyah);
  color:var(--beyaz);
  font-family:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-weight:300;
  font-size:17px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}

/* ---------- yardımcılar ---------- */
.kap{width:100%;max-width:var(--en);margin:0 auto;padding:0 28px;}
.dar{max-width:760px;}
.bolum{padding:96px 0;}
.bolum + .bolum{border-top:1px solid var(--cizgi);}
.orta{text-align:center;}

.etiket{
  font-size:12px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--soluk);font-weight:400;margin:0 0 22px;
}
.etiket.amber{color:var(--amber);}

h1,h2,h3,h4{font-weight:200;margin:0 0 24px;line-height:1.24;}
h1{font-size:clamp(2rem,5.2vw,3.6rem);letter-spacing:.02em;}
h2{font-size:clamp(1.5rem,3.4vw,2.4rem);letter-spacing:.03em;}
h3{font-size:1.18rem;letter-spacing:.10em;text-transform:uppercase;font-weight:400;}
h4{font-size:1rem;letter-spacing:.12em;text-transform:uppercase;font-weight:400;}
p{margin:0 0 18px;color:var(--gri);}
p.buyuk{font-size:1.16rem;color:var(--beyaz);}
strong{font-weight:500;color:var(--beyaz);}

.ayrac{width:88px;height:1px;background:var(--cizgi-guclu);border:0;margin:34px 0;}
.orta .ayrac{margin-left:auto;margin-right:auto;}

/* ---------- üst menü ---------- */
.ust{
  position:sticky;top:0;z-index:50;
  background:rgba(10,10,10,.92);
  -webkit-backdrop-filter:blur(12px);   /* iOS Safari */
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--cizgi);
}
.ust .kap{display:flex;align-items:center;justify-content:space-between;height:78px;}
.marka{display:flex;align-items:center;gap:13px;}
.marka img.isaret{width:30px;}
.marka img.söz,.marka img.soz{width:126px;opacity:.94;}
.menu{display:flex;gap:24px;align-items:center;}
.menu a{
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gri);font-weight:400;padding:6px 0;
  border-bottom:1px solid transparent;transition:var(--gecis);
}
.menu a:hover{color:var(--beyaz);border-bottom-color:var(--amber);}
.menu a.aktif{color:var(--beyaz);border-bottom-color:var(--amber);}

.menu-dugme{
  display:none;background:none;border:1px solid var(--cizgi-guclu);
  color:var(--beyaz);padding:9px 14px;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;cursor:pointer;font-family:inherit;
}

/* ---------- butonlar ---------- */
.btn{
  display:inline-block;padding:15px 34px;
  font-size:12px;letter-spacing:.20em;text-transform:uppercase;font-weight:400;
  border:1px solid var(--cizgi-guclu);color:var(--beyaz);
  transition:var(--gecis);
}
.btn:hover{border-color:var(--amber);color:var(--amber);}
.btn.dolu{background:var(--amber);border-color:var(--amber);color:var(--siyah);font-weight:500;}
.btn.dolu:hover{background:transparent;color:var(--amber);}
.btn + .btn{margin-left:14px;}

/* ---------- açılış ---------- */
.acilis{
  position:relative;
  min-height:74vh;display:flex;align-items:center;
  padding:110px 0 96px;
  border-bottom:1px solid var(--cizgi);
  overflow:hidden;
}
.acilis::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(232,180,81,.07), transparent 70%),
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(250,250,247,.03), transparent 70%);
  pointer-events:none;
}
.acilis .kap{position:relative;}
.acilis h1{max-width:15ch;}
.acilis.orta h1{margin-left:auto;margin-right:auto;}
.acilis p{max-width:60ch;font-size:1.1rem;}
.acilis.orta p{margin-left:auto;margin-right:auto;}
.acilis .isaret-buyuk,
.kahraman .isaret-buyuk{width:64px;margin-bottom:34px;opacity:.85;}
.acilis.orta .isaret-buyuk,
.kahraman.orta .isaret-buyuk{margin-left:auto;margin-right:auto;}

/* sayfa başlığı (iç sayfalar) */
.sayfa-basi{padding:82px 0 62px;border-bottom:1px solid var(--cizgi);}
.sayfa-basi h1{margin-bottom:18px;}
.sayfa-basi p{max-width:64ch;}

/* ---------- fotoğraflı açılış ---------- */
.kahraman{
  position:relative;min-height:82vh;display:flex;align-items:flex-end;
  border-bottom:1px solid var(--cizgi);overflow:hidden;
}
.kahraman .foto{
  position:absolute;inset:0;background-size:cover;background-position:center 38%;
  filter:grayscale(1);
}
.kahraman .perde{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,10,10,.72) 0%,rgba(10,10,10,.55) 40%,rgba(10,10,10,.96) 100%);
}
.kahraman .kap{position:relative;padding-top:120px;padding-bottom:76px;}
.kahraman h1{margin-bottom:20px;}
.kahraman p{max-width:58ch;font-size:1.1rem;color:var(--gri);}

/* fotoğraf şeridi */
.serit-foto{
  height:52vh;min-height:320px;background-size:cover;background-position:center;
  filter:grayscale(1);border-top:1px solid var(--cizgi);border-bottom:1px solid var(--cizgi);
}

/* kartta fotoğraf */
.kart .kapak{
  margin:-36px -32px 24px;height:210px;background-size:cover;background-position:center;
  filter:grayscale(1);opacity:.85;transition:var(--gecis);
}
.kart:hover .kapak{opacity:1;}

/* ---------- galeri ---------- */
.galeri{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));}
.galeri figure{margin:0;position:relative;overflow:hidden;border:1px solid var(--cizgi);}
.galeri img{
  width:100%;height:260px;object-fit:cover;filter:grayscale(1);
  transition:transform .5s cubic-bezier(.4,0,.2,1),filter var(--gecis);
}
.galeri figure:hover img{transform:scale(1.04);filter:grayscale(1) brightness(1.08);}
.galeri figcaption{
  padding:12px 14px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--soluk);border-top:1px solid var(--cizgi);
}
.galeri .bos{
  display:flex;align-items:center;justify-content:center;height:260px;
  border:1px dashed var(--cizgi-guclu);color:var(--soluk);
  font-size:11px;letter-spacing:.20em;text-transform:uppercase;text-align:center;padding:20px;
}

/* ---------- mekan videosu (galeri) ---------- */
.mekan-video{
  margin:0;max-width:420px;margin-left:auto;margin-right:auto;
  border:1px solid var(--cizgi);overflow:hidden;
}
.mekan-video video{width:100%;height:auto;display:block;background:var(--siyah);}
.mekan-video figcaption{
  padding:12px 14px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--soluk);border-top:1px solid var(--cizgi);text-align:center;
}

/* ---------- ekip ---------- */
.kisiler{display:grid;gap:30px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));}
.kisi{border:1px solid var(--cizgi);display:flex;flex-direction:column;}
.kisi .portre{
  aspect-ratio:4/5;overflow:hidden;border-bottom:1px solid var(--cizgi);
  background:var(--siyah);
}
.kisi .portre img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);}
/* yatay kadrajli fotograflar: kirpma yok, siyah zeminde ortalanir */
.kisi .portre.genis img{object-fit:contain;}
/* aspect-ratio desteklemeyen eski tarayicilar (iOS 14 ve oncesi) */
@supports not (aspect-ratio:4/5){
  .kisi .portre{height:0;padding-top:125%;position:relative;}
  .kisi .portre img{position:absolute;inset:0;}
}
.kisi .portre.bos{
  display:flex;align-items:center;justify-content:center;
  color:var(--soluk);font-size:11px;letter-spacing:.20em;text-transform:uppercase;
  text-align:center;padding:20px;background:var(--koyu);
}
.kisi .govde{padding:30px 28px;}
.kisi .rol{
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--amber);margin-bottom:12px;display:block;
}
.kisi h3{font-size:1.24rem;letter-spacing:.05em;text-transform:none;font-weight:300;margin-bottom:16px;}
.kisi p{font-size:.94rem;color:var(--soluk);margin:0 0 14px;}
.kisi p:last-child{margin-bottom:0;}

/* künye satırı */
.kunye{display:flex;flex-wrap:wrap;gap:1px;background:var(--cizgi);border:1px solid var(--cizgi);}
.kunye > div{background:var(--siyah);padding:24px 26px;flex:1 1 200px;}
.kunye h4{color:var(--soluk);margin-bottom:8px;font-size:11px;}
.kunye p{margin:0;color:var(--beyaz);font-size:1rem;}

/* ---------- ızgara ---------- */
.izgara{display:grid;gap:1px;background:var(--cizgi);border:1px solid var(--cizgi);}
.izgara.i2{grid-template-columns:repeat(2,1fr);}
.izgara.i3{grid-template-columns:repeat(3,1fr);}
.hucre{background:var(--siyah);padding:38px 32px;}
.hucre .sira{
  font-size:11px;letter-spacing:.28em;color:var(--amber);
  display:block;margin-bottom:16px;font-weight:400;
}
.hucre h3{margin-bottom:12px;font-size:1rem;}
.hucre p{margin:0;font-size:.95rem;color:var(--soluk);}

/* ---------- kartlar ---------- */
.kartlar{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));}
.kart{
  border:1px solid var(--cizgi);padding:36px 32px;
  display:flex;flex-direction:column;transition:var(--gecis);
  background:linear-gradient(180deg,rgba(250,250,247,.02),transparent);
}
.kart:hover{border-color:var(--cizgi-guclu);transform:translateY(-3px);}
.kart .ust-etiket{
  font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--amber);margin-bottom:16px;font-weight:400;
}
.kart h3{margin-bottom:14px;letter-spacing:.06em;text-transform:none;font-size:1.24rem;font-weight:300;}
.kart p{font-size:.95rem;color:var(--soluk);flex:1;}
.kart .devam{
  margin-top:20px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--beyaz);border-top:1px solid var(--cizgi);padding-top:18px;
}
.kart:hover .devam{color:var(--amber);}

.kart.acik{border-color:rgba(232,180,81,.42);}
.kart .rozet{
  display:inline-block;background:var(--amber);color:var(--siyah);
  font-size:10px;letter-spacing:.20em;text-transform:uppercase;font-weight:600;
  padding:5px 11px;margin-bottom:16px;
}
.kart .rozet.gecmis{background:transparent;color:var(--soluk);border:1px solid var(--cizgi);font-weight:400;}

/* ---------- değerler listesi ---------- */
.degerler{display:grid;gap:1px;background:var(--cizgi);border:1px solid var(--cizgi);
  grid-template-columns:repeat(3,1fr);}
.deger{background:var(--siyah);padding:38px 32px;}
.deger .no{font-size:11px;letter-spacing:.26em;color:var(--amber);display:block;margin-bottom:14px;}
.deger h3{font-size:1.02rem;letter-spacing:.06em;text-transform:none;font-weight:400;margin-bottom:10px;}
.deger p{margin:0;font-size:.94rem;color:var(--soluk);}

/* ---------- alıntı ---------- */
.alinti{
  border-left:1px solid var(--amber);padding:6px 0 6px 30px;
  font-style:italic;font-size:1.22rem;color:var(--beyaz);font-weight:200;
  margin:38px 0;line-height:1.6;
}
.alinti footer{
  font-style:normal;font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--soluk);margin-top:16px;
}

/* ---------- sss ---------- */
.sss details{border-bottom:1px solid var(--cizgi);padding:22px 0;}
.sss summary{
  cursor:pointer;list-style:none;font-size:1.02rem;font-weight:400;
  display:flex;justify-content:space-between;gap:20px;align-items:flex-start;
}
.sss summary::-webkit-details-marker{display:none;}
.sss summary::after{content:"+";color:var(--amber);font-size:1.3rem;line-height:1;flex:none;}
.sss details[open] summary::after{content:"–";}
.sss details p{margin:16px 0 0;color:var(--soluk);font-size:.98rem;}

/* ---------- çağrı şeridi ---------- */
.cagri{
  border:1px solid var(--cizgi);padding:60px 40px;text-align:center;
  background:linear-gradient(180deg,rgba(232,180,81,.05),transparent);
}
.cagri h2{margin-bottom:16px;}
.cagri p{max-width:56ch;margin-left:auto;margin-right:auto;}

/* ---------- iletişim ---------- */
.bilgi{display:grid;gap:1px;background:var(--cizgi);border:1px solid var(--cizgi);
  grid-template-columns:repeat(2,1fr);}
.bilgi > div{background:var(--siyah);padding:34px 30px;}
.bilgi h4{color:var(--soluk);margin-bottom:12px;}
.bilgi p{margin:0;color:var(--beyaz);font-size:1.02rem;}
.bilgi a:hover{color:var(--amber);}

/* ---------- alt bilgi ---------- */
.alt{border-top:1px solid var(--cizgi);padding:60px 0 44px;margin-top:0;}
.alt .satir{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;}
.alt img.soz{width:150px;opacity:.9;margin-bottom:18px;}
.alt p{font-size:.9rem;color:var(--soluk);margin:0 0 8px;}
.alt .baglar{display:flex;flex-direction:column;gap:10px;}
.alt .baglar a{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gri);}
.alt .baglar a:hover{color:var(--amber);}
.alt .motto{
  margin-top:44px;padding-top:26px;border-top:1px solid var(--cizgi);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--soluk);
}

/* ---------- mobil ---------- */
@media (max-width:900px){
  .izgara.i3,.degerler{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:720px){
  body{font-size:16px;}
  .bolum{padding:64px 0;}
  .kap{padding:0 20px;}
  .ust .kap{height:66px;}
  .menu{
    display:none;position:absolute;top:66px;left:0;right:0;
    flex-direction:column;gap:0;align-items:stretch;
    background:var(--siyah);border-bottom:1px solid var(--cizgi);padding:8px 20px 20px;
  }
  .menu.acik{display:flex;}
  .menu a{padding:17px 0;border-bottom:1px solid var(--cizgi);}   /* ~46px dokunma hedefi */
  .menu a:hover,.menu a.aktif{border-bottom-color:var(--cizgi);}
  .menu-dugme{display:block;}
  .izgara.i2,.izgara.i3,.degerler,.bilgi{grid-template-columns:1fr;}
  .acilis{min-height:auto;padding:72px 0 64px;}
  .btn{display:block;text-align:center;}
  .btn + .btn{margin-left:0;margin-top:12px;}
  .cagri{padding:44px 24px;}
  .kahraman{min-height:auto;}
  .kahraman .kap{padding-top:86px;padding-bottom:56px;}
  .serit-foto{height:34vh;min-height:220px;}
  .galeri{grid-template-columns:1fr 1fr;gap:10px;}
  .galeri img,.galeri .bos{height:170px;}
  .kart .kapak{margin:-36px -32px 22px;height:180px;}
}