/* =========================================================================
   Yıldızel Yapı — SİNEMA KATMANI (2026-10)
   Siyah-altın sinematik tasarım. style.css'in ÜSTÜNE yüklenir; oradaki
   bileşenleri yeniden biçimler, ana sayfanın yeni bölümlerini ekler.

   ⚠ Değişken adları style.css'le AYNI (--buz vb.) — panelden gelen renk
     ayarları (renk_aksan → --buz) bu katmanı da yönetsin diye. "buz" adı
     tarihî; değeri artık logonun altını.
   ⚠ Marka altını #D8B000 (logo-header.png'den ölçüldü).
   ⚠ Hareket: yalnız `.js-hareket` varsa ve kullanıcı hareket azaltmayı
     açmamışsa. Aksi hâlde her şey baştan görünür, hiçbir içerik gizli kalmaz.
   ========================================================================= */

:root {
  --zemin:      #09090a;
  --zemin-2:    #0f0f11;
  --kart:       #141416;
  --kart-ust:   #1b1b1e;
  --cizgi:      #26262a;
  --metin:      #f4f1ea;
  --metin-2:    #b3aea3;
  --metin-3:    #7d796f;
  --buz:        #d8b000;              /* marka altını */
  --buz-parlak: #f1cf3a;
  --buz-koyu:   #a88900;
  --altin-yumusak: #e8d49a;
  --altin-degrade: linear-gradient(115deg, #fff1b8 0%, #f1cf3a 22%, #d8b000 48%, #a88900 70%, #f6dc6a 100%);

  --en:      1480px;
  --yan-bosluk: clamp(20px, 4.2vw, 64px);
  --yuvarlak: 18px;
  --golge:   0 2px 10px rgba(0,0,0,.4), 0 24px 60px rgba(0,0,0,.45);
  --gecis:   .3s cubic-bezier(.2,.7,.2,1);
  --yavas:   .9s cubic-bezier(.16,1,.3,1);

  --yazi: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

:root[data-tema="acik"] {
  --zemin:      #faf8f3;
  --zemin-2:    #f2eee5;
  --kart:       #ffffff;
  --kart-ust:   #f3efe6;
  --cizgi:      #e2dccd;
  --metin:      #141310;
  --metin-2:    #57534a;
  --metin-3:    #8a857a;
  --buz:        #9a7b00;              /* açık zeminde okunur altın */
  --buz-parlak: #7d6400;
  --buz-koyu:   #6b5600;
  --golge:      0 1px 3px rgba(20,19,16,.08), 0 14px 40px rgba(20,19,16,.08);
}

/* ---------------------------------------------------------------- temel */
body { font-family: var(--yazi); letter-spacing: -.003em; }
h1, h2, h3, h4 { font-weight: 800; letter-spacing: -.028em; line-height: 1.08; color: var(--metin); }
h1 { font-size: clamp(2.35rem, 6.2vw, 5.4rem); }
h2 { font-size: clamp(1.85rem, 3.8vw, 3.35rem); }
h3 { font-size: clamp(1.12rem, 1.6vw, 1.34rem); letter-spacing: -.016em; line-height: 1.25; }
p  { line-height: 1.72; }
::selection { background: var(--buz); color: #0b0b0c; }

.kap { max-width: var(--en); padding-inline: var(--yan-bosluk); }

.bolum { padding-block: clamp(72px, 10vw, 150px); position: relative; }
.bolum--alt, .bolum--koyu { background: var(--zemin-2); }
.bolum--koyu::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--buz) 45%, transparent), transparent);
}

.bolum-bas { max-width: 760px; margin-bottom: clamp(36px, 5vw, 64px); }
.bolum-bas p { font-size: clamp(1rem, 1.25vw, 1.12rem); }
.bolum-bas--yana {
  max-width: none; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(20px, 5vw, 80px); align-items: end;
}
.bolum-bas--yana p { margin: 0; max-width: 56ch; }
.bolum-bas--yana > .dugme { justify-self: end; }
.bolum-son { margin-top: clamp(32px, 4vw, 52px); display: flex; flex-wrap: wrap; gap: 12px; }

/* Altın etiket: iki ince çizgi arasında aralıklı büyük harf */
.etiket {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: .74rem; font-weight: 700; letter-spacing: .26em; text-transform: uppercase;
  color: var(--buz); margin-bottom: 18px; padding: 0; background: none; border: 0;
}
.etiket::before { content: ""; width: 34px; height: 1px; background: currentColor; opacity: .7; }

/* ---------------------------------------------------------------- başlık */
.ust {
  background: color-mix(in srgb, var(--zemin) 78%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--cizgi) 70%, transparent);
  transition: background var(--gecis), border-color var(--gecis), box-shadow var(--gecis);
}
.ust-ic { height: 78px; gap: 28px; }
.logo img { height: 40px !important; }
.menu a { font-weight: 600; font-size: .92rem; color: var(--metin-2); border-radius: 999px; padding: 9px 15px; }
.menu a:hover { background: transparent; color: var(--metin); }
.menu a[aria-current="page"] { background: transparent; color: var(--buz); }
.tema-dugme, .hamburger { border-radius: 999px; border-color: color-mix(in srgb, var(--metin) 16%, transparent); }

/* Ana sayfada başlık sinematik girişin üstünde ŞEFFAF; kaydırınca koyulaşır. */
.sayfa-ana .ust { position: fixed; left: 0; right: 0; top: 0; }
.sayfa-ana:not(.kaydi) .ust {
  background: linear-gradient(180deg, rgba(0,0,0,.55), transparent);
  border-bottom-color: transparent; backdrop-filter: none;
}
.sayfa-ana:not(.kaydi) .menu a { color: rgba(255,255,255,.82); }
.sayfa-ana:not(.kaydi) .menu a:hover { color: #fff; }
.kaydi .ust { box-shadow: 0 10px 40px rgba(0,0,0,.35); }

/* ---------------------------------------------------------------- düğme */
.dugme { border-radius: 999px; font-weight: 700; letter-spacing: .005em; padding: 13px 24px; }
.dugme--buyuk { padding: 17px 32px; font-size: 1rem; }
.dugme--ana {
  background: var(--altin-degrade); background-size: 220% 100%; background-position: 0 0;
  color: #120f00; border: 0; box-shadow: 0 10px 30px -8px color-mix(in srgb, var(--buz) 70%, transparent);
}
.dugme--ana:hover {
  background: var(--altin-degrade); background-size: 220% 100%; background-position: 100% 0;
  color: #120f00; transform: translateY(-2px);
  box-shadow: 0 16px 40px -8px color-mix(in srgb, var(--buz) 85%, transparent);
}
.dugme--cizgi { border-color: color-mix(in srgb, var(--metin) 22%, transparent); color: var(--metin); background: transparent; }
.dugme--cizgi:hover { border-color: var(--buz); color: var(--buz); background: color-mix(in srgb, var(--buz) 7%, transparent); }
.dugme span { transition: transform var(--gecis); }
.dugme:hover span { transform: translateX(4px); }

/* ================================================================ GİRİŞ */
.hero--sinema {
  min-height: 100vh; min-height: 100svh;
  background: #050505; isolation: isolate;
}
.hero--sinema::before { display: none; }
.hero--sinema > .slayt {
  display: flex; align-items: flex-end;
  padding-block: 140px clamp(110px, 14vh, 170px);
  transition: opacity 1.2s ease, visibility 1.2s;
}
.hero--sinema .kap { width: 100%; }

/* Yavaş yakınlaşma (Ken Burns) — aktif slaytta baştan başlar */
.hero--sinema .slayt-gorsel { transform: scale(1.14); transform-origin: 60% 55%; }
.js-hareket .hero--sinema .slayt--aktif .slayt-gorsel { animation: yakinlas 11s cubic-bezier(.2,.6,.2,1) forwards; }
@keyframes yakinlas { from { transform: scale(1.14); } to { transform: scale(1.0); } }

/* Sinematik karartma: alttan siyah, soldan yazı için gölge, üstte başlık için */
.hero--sinema .slayt--gorselli::before {
  background:
    linear-gradient(0deg, #050505 0%, rgba(5,5,5,.86) 18%, rgba(5,5,5,.15) 58%, rgba(5,5,5,.55) 100%),
    linear-gradient(90deg, rgba(5,5,5,.78) 0%, rgba(5,5,5,.25) 55%, transparent 80%);
}

/* Altın ışık süzülmesi: parlak zeminde yansıyan atölye ışığı */
.isik {
  position: absolute; inset: -20% -40%; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255,214,90,.0) 42%,
              rgba(255,221,120,.20) 48%, rgba(255,246,210,.32) 50%, rgba(255,221,120,.18) 52%, transparent 58%);
  mix-blend-mode: screen; transform: translateX(-60%); opacity: 0;
}
.js-hareket .slayt--aktif .isik { animation: suzul 7.5s 1.1s ease-in-out infinite; }
@keyframes suzul {
  0% { transform: translateX(-60%); opacity: 0; }
  12% { opacity: 1; }
  55% { transform: translateX(55%); opacity: 1; }
  70%, 100% { transform: translateX(60%); opacity: 0; }
}

.hero--sinema .hero-ic { max-width: 1040px; }
.hero-ust {
  display: inline-flex; align-items: center; gap: 14px; margin-bottom: 26px;
  font-size: .78rem; font-weight: 700; letter-spacing: .32em; text-transform: uppercase;
  color: var(--buz);
}
.hero-ust::before, .hero-ust::after { content: ""; width: 48px; height: 1px; background: currentColor; opacity: .75; }
.hero--sinema .slayt-baslik {
  font-size: clamp(2.5rem, 6.6vw, 6rem); line-height: 1.0; letter-spacing: -.04em;
  color: #fff; margin-bottom: 26px; max-width: 16ch; text-wrap: balance;
  /* text-shadow DEĞİL: yazı rengi şeffaf (degrade kırpma), gölge harfin içini karartıyor. */
  filter: drop-shadow(0 4px 30px rgba(0,0,0,.45));
}
/* İlk kelime grubu altın degradeyle parlar (slayt başlığı panelden gelir,
   işaretleme eklenmez — tüm başlık degradeli, beyaza doğru kayar). */
.hero--sinema .slayt-baslik {
  background: linear-gradient(100deg, #ffffff 0%, #ffffff 46%, #f6dc6a 62%, #d8b000 78%, #fff1b8 100%);
  background-size: 200% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.js-hareket .slayt--aktif .slayt-baslik { animation: baslikParla 3.2s .5s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes baslikParla { from { background-position: 100% 0; } to { background-position: 0 0; } }

.hero--sinema .hero-ozet { color: rgba(255,255,255,.8); font-size: clamp(1.04rem, 1.45vw, 1.24rem); max-width: 58ch; }
.hero--sinema .hero-eylem { margin-top: 38px; gap: 14px; }
.hero--sinema .dugme--cizgi { color: #fff; border-color: rgba(255,255,255,.34); backdrop-filter: blur(6px); }

/* Giriş yazıları sırayla süzülür */
.js-hareket .hero--sinema .slayt--aktif .hero-ust,
.js-hareket .hero--sinema .slayt--aktif .slayt-baslik,
.js-hareket .hero--sinema .slayt--aktif .hero-ozet,
.js-hareket .hero--sinema .slayt--aktif .hero-eylem { animation-name: yukselBelir; animation-duration: 1.1s;
  animation-timing-function: cubic-bezier(.16,1,.3,1); animation-fill-mode: both; }
.js-hareket .hero--sinema .slayt--aktif .slayt-baslik {
  animation-name: yukselBelir, baslikParla; animation-duration: 1.1s, 3.2s;
  animation-delay: .25s, .7s; animation-fill-mode: both, forwards; }
.js-hareket .hero--sinema .slayt--aktif .hero-ust { animation-delay: .1s; }
.js-hareket .hero--sinema .slayt--aktif .hero-ozet { animation-delay: .45s; }
.js-hareket .hero--sinema .slayt--aktif .hero-eylem { animation-delay: .6s; }
/* filter KULLANILMAZ: başlığın drop-shadow'unu animasyon sonunda siliyordu. */
@keyframes yukselBelir { from { opacity: 0; transform: translateY(34px); }
                         to   { opacity: 1; transform: none; } }

/* Slayt göstergesi: dolan altın çubuk */
/* Sağ altta WhatsApp düğmesi var (54 px + 18 px boşluk) — çubuklar onun soluna. */
.hero--sinema .slider-nokta { bottom: 42px; left: auto; right: calc(var(--yan-bosluk) + 76px); justify-content: flex-end; gap: 10px; }
.hero--sinema .slider-nokta button {
  width: 54px; height: 3px; border-radius: 0; background: rgba(255,255,255,.22); position: relative; overflow: hidden;
}
.hero--sinema .slider-nokta button[aria-selected="true"] { width: 54px; background: rgba(255,255,255,.22); }
.hero--sinema .slider-nokta i { position: absolute; inset: 0; background: var(--buz); transform: scaleX(0); transform-origin: left; }
.hero--sinema .slider-nokta button[aria-selected="true"] i { transform: scaleX(1); }
.js-hareket .hero--sinema .slider-nokta button[aria-selected="true"] i { animation: dol var(--sure, 6.5s) linear forwards; }
@keyframes dol { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.hero-kaydir {
  position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: rgba(255,255,255,.62); font-size: .7rem; font-weight: 700; letter-spacing: .3em; text-transform: uppercase;
}
.hero-kaydir:hover { color: var(--buz); }
.hero-kaydir i { width: 1px; height: 46px; background: linear-gradient(var(--buz), transparent); position: relative; overflow: hidden; }
.js-hareket .hero-kaydir i::after {
  content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: #fff;
  animation: damla 2.2s ease-in-out infinite;
}
@keyframes damla { from { top: -40%; } to { top: 100%; } }

/* ================================================================ SAYAÇLAR */
.sayac-serit { background: #050505; border-block: 1px solid #1c1c1f; padding-block: clamp(34px, 5vw, 56px); }
.sayaclar { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 24px; }
.sayac { display: flex; flex-direction: column; gap: 6px; padding-left: 22px; border-left: 1px solid #26262a; }
.sayac b {
  font-size: clamp(2.2rem, 4.4vw, 3.6rem); font-weight: 800; letter-spacing: -.04em; line-height: 1;
  background: var(--altin-degrade); -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums;
}
.sayac span { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: #8b867b; font-weight: 600; }

/* ================================================================ VİTRİN */
.vitrin {
  display: grid; gap: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: clamp(220px, 22vw, 330px);
}
.vitrin-oge {
  position: relative; overflow: hidden; border-radius: var(--yuvarlak); isolation: isolate;
  display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(18px, 2vw, 28px);
  background: var(--kart); color: #fff; border: 1px solid #1f1f22;
}
.vitrin-oge--buyuk { grid-column: span 2; grid-row: span 2; }
.vitrin-oge--genis { grid-column: span 2; }
.vitrin-oge picture, .vitrin-gorsel { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.vitrin-gorsel { object-fit: cover; transition: transform 1.4s cubic-bezier(.16,1,.3,1), filter .6s; filter: saturate(.85) brightness(.82); }
.vitrin-oge::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, rgba(5,5,5,.94) 0%, rgba(5,5,5,.55) 42%, rgba(5,5,5,.05) 75%);
  transition: background var(--gecis);
}
.vitrin-oge::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--buz) 0%, transparent); transition: box-shadow var(--gecis);
}
.vitrin-oge:hover .vitrin-gorsel { transform: scale(1.07); filter: saturate(1) brightness(.95); }
.vitrin-oge:hover::after { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--buz) 70%, transparent); }
.vitrin-no {
  position: absolute; top: clamp(16px, 2vw, 24px); left: clamp(18px, 2vw, 28px);
  font-size: .78rem; font-weight: 800; letter-spacing: .2em; color: var(--buz);
}
.vitrin-yazi h3 { color: #fff; font-size: clamp(1.05rem, 1.35vw, 1.3rem); }
.vitrin-oge--buyuk .vitrin-yazi h3 { font-size: clamp(1.6rem, 2.6vw, 2.5rem); max-width: 16ch; }
.vitrin-yazi p {
  color: rgba(255,255,255,.72); font-size: .9rem; margin-top: 8px; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  max-height: 0; opacity: 0; transition: max-height .6s ease, opacity .5s ease;
}
.vitrin-oge--buyuk .vitrin-yazi p { max-height: 6em; opacity: 1; max-width: 46ch; font-size: 1rem; -webkit-line-clamp: 3; }
.vitrin-oge:hover .vitrin-yazi p, .vitrin-oge:focus-visible .vitrin-yazi p { max-height: 4em; opacity: 1; }
.vitrin-ok {
  position: absolute; top: clamp(14px, 2vw, 22px); right: clamp(14px, 2vw, 22px);
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.25); color: #fff; transition: var(--gecis);
}
.vitrin-oge:hover .vitrin-ok { background: var(--buz); border-color: var(--buz); color: #120f00; transform: rotate(-35deg); }

/* ================================================================ KADEMELER */
.kademe { display: flex; gap: 12px; height: clamp(420px, 46vw, 620px); }
.kademe-oge {
  position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; border-radius: var(--yuvarlak);
  isolation: isolate; cursor: pointer; outline: none; border: 1px solid #1f1f22;
  transition: flex-grow 1s cubic-bezier(.16,1,.3,1);
}
.kademe-oge--acik, .kademe:hover .kademe-oge:hover, .kademe-oge:focus-visible { flex-grow: 2.6; }
.kademe:hover .kademe-oge--acik:not(:hover) { flex-grow: 1; }
.kademe-oge picture, .kademe-gorsel { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.kademe-gorsel { object-fit: cover; transition: transform 1.6s cubic-bezier(.16,1,.3,1), filter .8s; filter: grayscale(.35) brightness(.6); }
.kademe-oge--acik .kademe-gorsel, .kademe:hover .kademe-oge:hover .kademe-gorsel { filter: none; transform: scale(1.04); }
.kademe:hover .kademe-oge--acik:not(:hover) .kademe-gorsel { filter: grayscale(.35) brightness(.6); transform: none; }
.kademe-oge::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, rgba(5,5,5,.92) 0%, rgba(5,5,5,.2) 55%, transparent);
}
.kademe-yazi { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(20px, 2.6vw, 36px); color: #fff; }
.kademe-no { display: block; font-size: .78rem; font-weight: 800; letter-spacing: .22em; color: var(--buz); margin-bottom: 10px; }
.kademe-yazi h3 { color: #fff; font-size: clamp(1.4rem, 2.4vw, 2.3rem); white-space: nowrap; }
.kademe-yazi p {
  color: rgba(255,255,255,.78); margin-top: 10px; max-width: 42ch; font-size: .98rem;
  opacity: 0; transform: translateY(12px); transition: opacity .6s .15s, transform .6s .15s;
}
.kademe-oge--acik .kademe-yazi p, .kademe:hover .kademe-oge:hover .kademe-yazi p, .kademe-oge:focus-visible .kademe-yazi p { opacity: 1; transform: none; }
.kademe:hover .kademe-oge--acik:not(:hover) .kademe-yazi p { opacity: 0; }
/* JS yoksa üç panel de açıklamasını gösterir */
body:not(.js-hareket) .kademe-yazi p { opacity: 1; transform: none; }

/* ================================================================ ÖNCE / SONRA */
.os-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); gap: 18px; }
.os {
  position: relative; margin: 0; overflow: hidden; border-radius: var(--yuvarlak);
  aspect-ratio: 2 / 1; background: var(--kart); user-select: none; border: 1px solid var(--cizgi);
}
.os picture, .os-gorsel { position: absolute; inset: 0; width: 100%; height: 100%; }
.os-gorsel { object-fit: cover; }
.os-once { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--os)) 0 0); }
.os-once .os-gorsel { filter: saturate(.7); }
.os-cizgi { position: absolute; top: 0; bottom: 0; left: var(--os); width: 2px; margin-left: -1px; background: var(--buz); pointer-events: none;
  box-shadow: 0 0 24px color-mix(in srgb, var(--buz) 80%, transparent); }
.os-cizgi i {
  position: absolute; top: 50%; left: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%;
  background: var(--buz); box-shadow: 0 8px 30px rgba(0,0,0,.5);
}
.os-cizgi i::before, .os-cizgi i::after {
  content: ""; position: absolute; top: 50%; width: 0; height: 0; margin-top: -6px;
  border-block: 6px solid transparent;
}
.os-cizgi i::before { left: 12px; border-right: 8px solid #120f00; }
.os-cizgi i::after { right: 12px; border-left: 8px solid #120f00; }
.os-etiket {
  position: absolute; top: 16px; padding: 6px 12px; border-radius: 999px; pointer-events: none;
  font-size: .72rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  background: rgba(5,5,5,.65); color: #fff; backdrop-filter: blur(6px);
}
.os-etiket--once { left: 16px; }
.os-etiket--sonra { right: 16px; color: var(--buz); }
.os-aralik { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.os-aralik:focus-visible + figcaption { color: var(--buz); }
.os figcaption {
  position: absolute; left: 16px; bottom: 14px; pointer-events: none;
  font-weight: 800; font-size: 1.05rem; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.6);
}

/* ================================================================ SAHA VİDEOSU */
.saha {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(460px, 62vw, 760px); display: flex; align-items: center; background: #050505;
}
.saha-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
  filter: saturate(.55) contrast(1.08) brightness(.62) sepia(.25); }
.saha::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(5,5,5,.92) 0%, rgba(5,5,5,.55) 48%, rgba(5,5,5,.15) 100%),
    radial-gradient(80% 60% at 80% 50%, color-mix(in srgb, var(--buz) 16%, transparent), transparent 70%);
}
.saha-ic { max-width: 640px; }
.saha-ic h2 { color: #fff; }
.saha-ic p { color: rgba(255,255,255,.78); margin-top: 18px; font-size: clamp(1rem, 1.3vw, 1.15rem); }

/* ================================================================ KULLANIM ALANLARI */
.mekan-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 14px; }
.mekan {
  position: relative; overflow: hidden; isolation: isolate; border-radius: var(--yuvarlak);
  aspect-ratio: 4 / 3; display: flex; align-items: flex-end; padding: 22px; color: #fff; border: 1px solid #1f1f22;
  background: var(--kart);
}
.mekan picture, .mekan-gorsel { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.mekan-gorsel { object-fit: cover; filter: brightness(.7) saturate(.85); transition: transform 1.4s cubic-bezier(.16,1,.3,1), filter .6s; }
.mekan::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, rgba(5,5,5,.92), rgba(5,5,5,.1) 65%); }
.mekan:hover .mekan-gorsel { transform: scale(1.06); filter: brightness(.85) saturate(1); }
.mekan-yazi { display: flex; flex-direction: column; gap: 4px; }
.mekan-yazi small { font-size: .74rem; font-weight: 800; letter-spacing: .2em; color: var(--buz); }
.mekan-yazi b { font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; }
.mekan-yazi em {
  font-style: normal; font-size: .88rem; color: rgba(255,255,255,.72); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mekan:hover { color: #fff; }

/* ================================================================ REFERANSLAR */
.proje-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 14px; }
.proje {
  position: relative; overflow: hidden; isolation: isolate; border-radius: var(--yuvarlak);
  aspect-ratio: 16 / 11; display: flex; align-items: flex-end; padding: 22px; color: #fff; border: 1px solid #1f1f22;
}
.proje picture, .proje-gorsel { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.proje-gorsel { object-fit: cover; filter: grayscale(.6) brightness(.7); transition: filter .7s, transform 1.4s cubic-bezier(.16,1,.3,1); }
.proje::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(5,5,5,.9), transparent 60%); }
.proje:hover .proje-gorsel { filter: none; transform: scale(1.05); }
.proje-yazi { display: flex; flex-direction: column; gap: 6px; }
.proje-yazi small { font-size: .74rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--buz); }
.proje-yazi b { font-size: 1.2rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; }
.proje:hover { color: #fff; }

/* ================================================================ KARTLAR (tüm site) */
.kart { border-radius: var(--yuvarlak); border-color: var(--cizgi); background: var(--kart); }
.kart:hover { border-color: color-mix(in srgb, var(--buz) 55%, var(--cizgi)); transform: translateY(-4px); box-shadow: var(--golge); }
.kart-gorsel { transition: transform 1.2s cubic-bezier(.16,1,.3,1); }
.kart:hover .kart-gorsel { transform: scale(1.05); }
.kart-govde { padding: 24px; }
.kart-govde h3 a:hover { color: var(--buz); }
.kart-alt { color: var(--buz); }

/* ---------------------------------------------------------------- çipler */
.cip-serit a {
  border-radius: 999px !important; border-color: var(--cizgi) !important; font-weight: 600;
  transition: var(--gecis);
}
.cip-serit a:hover { border-color: var(--buz) !important; color: var(--buz) !important;
  background: color-mix(in srgb, var(--buz) 8%, transparent) !important; }

/* ---------------------------------------------------------------- SSS */
.sss-kap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 5vw, 80px); align-items: start; }
.sss-kap .bolum-bas { position: sticky; top: 110px; }
.sss { max-width: none; gap: 0; }
.sss-oge { background: transparent; border: 0; border-bottom: 1px solid var(--cizgi); border-radius: 0; }
.sss-oge summary { padding: 24px 4px; font-size: 1.08rem; font-weight: 700; }
.sss-oge summary::after {
  content: "+"; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--cizgi); font-size: 1.1rem; transition: var(--gecis);
}
.sss-oge[open] summary::after { content: "−"; background: var(--buz); border-color: var(--buz); color: #120f00; }
.sss-cevap { padding: 0 4px 24px; }

/* ================================================================ FİNAL */
.final {
  position: relative; isolation: isolate; overflow: hidden; text-align: center;
  min-height: clamp(460px, 56vw, 720px); display: flex; align-items: center; background: #050505;
}
.final picture, .final-gorsel { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.final-gorsel { object-fit: cover; filter: brightness(.45) saturate(.8); }
.final::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(60% 70% at 50% 50%, rgba(5,5,5,.35), rgba(5,5,5,.9));
}
.final-ic { max-width: 820px; margin-inline: auto; }
.final h2 { color: #fff; font-size: clamp(2rem, 4.6vw, 4rem); text-wrap: balance; }
.final p { color: rgba(255,255,255,.78); margin-top: 18px; font-size: clamp(1rem, 1.4vw, 1.2rem); }
.final .hero-eylem { margin-top: 34px; }

/* ================================================================ ALT BİLGİ */
.alt { background: #050505; border-top: 1px solid #1c1c1f; margin-top: 0; padding-block: clamp(60px, 7vw, 96px) 30px; }
.sayfa-ana .alt { margin-top: 0; }
.alt h5 { color: var(--buz); letter-spacing: .22em; }
.alt a:hover { color: var(--buz); }
.alt .logo span { color: var(--buz); }

/* ================================================================ İÇ SAYFALAR */
.sayfa-ic main > .bolum:first-child,
.sayfa-ic main > section:first-child { padding-top: clamp(48px, 6vw, 88px); }
.icerik blockquote { border-left-color: var(--buz); }
.yan-kutu { border-radius: var(--yuvarlak); }
.yan-kutu--vurgu { border-color: color-mix(in srgb, var(--buz) 45%, var(--cizgi)); }

/* ================================================================ BELİRME */
.js-hareket [data-belir] {
  opacity: 0; transform: translateY(40px);
  transition: opacity 1s cubic-bezier(.16,1,.3,1), transform 1.1s cubic-bezier(.16,1,.3,1);
  transition-delay: var(--gecikme, 0s);
}
.js-hareket [data-belir].belirdi { opacity: 1; transform: none; }

/* ================================================================ MOBİL */
@media (max-width: 1100px) {
  .vitrin { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(220px, 40vw, 320px); }
  .vitrin-oge--buyuk { grid-column: span 2; grid-row: span 1; }
  .vitrin-oge--genis { grid-column: auto; }
  .vitrin-oge--genis:last-child:nth-child(even) { grid-column: span 2; }
}
@media (max-width: 900px) {
  .bolum-bas--yana { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .bolum-bas--yana > .dugme { justify-self: start; }
  .sss-kap { grid-template-columns: minmax(0, 1fr); }
  .sss-kap .bolum-bas { position: static; }
  .kademe { flex-direction: column; height: auto; }
  .kademe-oge { flex: none; height: 300px; }
  .kademe-oge .kademe-yazi p { opacity: 1; transform: none; }
  .kademe-oge .kademe-gorsel { filter: none; }
  .kademe:hover .kademe-oge--acik:not(:hover) .kademe-yazi p { opacity: 1; }
  .kademe:hover .kademe-oge--acik:not(:hover) .kademe-gorsel { filter: none; }
}
@media (max-width: 720px) {
  .ust-ic { height: 68px; }
  .logo img { height: 34px !important; }
  .hero--sinema > .slayt { padding-block: 110px 120px; }
  .hero--sinema .slayt-baslik { font-size: clamp(2.1rem, 10vw, 3rem); }
  .hero-ust::after { display: none; }
  .hero--sinema .slider-nokta { left: var(--yan-bosluk); right: auto; justify-content: flex-start; bottom: 34px; }
  .hero--sinema .slider-nokta button { width: 34px; }
  .hero-kaydir { display: none; }
  .hero--sinema .hero-eylem .dugme { flex: 1 1 100%; justify-content: center; }
  .vitrin { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 240px; }
  .vitrin-oge--buyuk { grid-column: auto; grid-row: span 1; }
  .vitrin-oge--genis, .vitrin-oge--genis:last-child:nth-child(even) { grid-column: auto; }
  .vitrin-oge--buyuk .vitrin-yazi h3 { font-size: 1.5rem; }
  .vitrin-yazi p { max-height: 4em; opacity: 1; }
  .os { aspect-ratio: 4 / 3; }
  .sayac { padding-left: 14px; }
  .sayaclar { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 20px; }
  .saha::before { background: linear-gradient(0deg, rgba(5,5,5,.95) 10%, rgba(5,5,5,.45)); }
  .saha { align-items: flex-end; padding-block: 60px; }
  .menu { background: #0b0b0c; }
  .sayfa-ana:not(.kaydi) .menu a { color: var(--metin-2); }
}

@media (prefers-reduced-motion: reduce) {
  .js-hareket [data-belir] { opacity: 1; transform: none; }
  .hero--sinema .slayt-gorsel { transform: none; }
  .hero--sinema .slayt-baslik { background-position: 0 0; }
  .isik { display: none; }
}


/* =========================================================================
   İÇ SAYFALAR (2026-10)
   ========================================================================= */

/* ---- sinematik sayfa başlığı (partials/sayfa_bas.php) ---- */
.sayfa-bas {
  position: relative; isolation: isolate; overflow: hidden; background: #050505;
  padding-block: clamp(130px, 15vw, 200px) clamp(56px, 7vw, 96px);
  min-height: clamp(380px, 42vw, 560px); display: flex; align-items: flex-end;
}
.sayfa-bas .kap { width: 100%; }
.sayfa-bas picture, .sayfa-bas-gorsel { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.sayfa-bas-gorsel { object-fit: cover; filter: brightness(.5) saturate(.8); transform: scale(1.06); }
.js-hareket .sayfa-bas-gorsel { animation: yakinlas 12s cubic-bezier(.2,.6,.2,1) forwards; }
.sayfa-bas::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, var(--zemin) 0%, rgba(5,5,5,.55) 45%, rgba(5,5,5,.45) 100%),
              linear-gradient(90deg, rgba(5,5,5,.75), transparent 70%);
}
.sayfa-bas .kirinti { margin-bottom: 26px; color: rgba(255,255,255,.55); }
.sayfa-bas .kirinti a { color: rgba(255,255,255,.75); }
.sayfa-bas .kirinti a:hover { color: var(--buz); }
.sayfa-bas h1 { color: #fff; font-size: clamp(2.3rem, 5.6vw, 4.8rem); max-width: 18ch; text-wrap: balance; }
.sayfa-bas-ozet { color: rgba(255,255,255,.78); margin-top: 20px; max-width: 62ch; font-size: clamp(1rem, 1.35vw, 1.16rem); }
.sayfa-bas-ek { margin-top: 22px; color: var(--buz); font-weight: 800; letter-spacing: .2em; text-transform: uppercase; font-size: .76rem; }
.sayfa-ic .sayfa-bas + .bolum { padding-top: clamp(40px, 5vw, 72px); }

/* İç sayfada başlık da şeffaf başlar (sayfa başı bandı görselli) */
.sayfa-ic .ust { position: fixed; left: 0; right: 0; top: 0; }
.sayfa-ic:not(.kaydi) .ust { background: linear-gradient(180deg, rgba(0,0,0,.6), transparent); border-bottom-color: transparent; backdrop-filter: none; }
.sayfa-ic:not(.kaydi) .menu a { color: rgba(255,255,255,.82); }
/* Sayfa başı bandı OLMAYAN iç sayfalar (detaylar, hesaplayıcı…) sabit başlığın altında kalmasın */
.sayfa-ic main > .bolum:first-child { padding-top: clamp(120px, 12vw, 160px); }

.bolum--sik { padding-block: clamp(48px, 6vw, 90px); }

/* ---- görsel üstü yazılı kart (hizmet + referans listeleri) ---- */
.gk-izgara { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); }
.gk {
  position: relative; overflow: hidden; isolation: isolate; border-radius: var(--yuvarlak);
  aspect-ratio: 4 / 3; display: flex; align-items: flex-end; padding: clamp(18px, 2vw, 26px);
  color: #fff; background: var(--kart); border: 1px solid #1f1f22;
}
.gk--proje { aspect-ratio: 16 / 11; }
.gk picture, .gk-gorsel { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.gk-gorsel { object-fit: cover; filter: brightness(.72) saturate(.85); transition: transform 1.4s cubic-bezier(.16,1,.3,1), filter .6s; }
.gk::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(5,5,5,.94) 0%, rgba(5,5,5,.35) 55%, rgba(5,5,5,.05)); }
.gk::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px transparent; transition: box-shadow var(--gecis); }
.gk:hover { color: #fff; }
.gk:hover .gk-gorsel { transform: scale(1.06); filter: brightness(.9) saturate(1); }
.gk:hover::after { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--buz) 70%, transparent); }
.gk-no { position: absolute; top: 20px; left: 22px; font-size: .76rem; font-weight: 800; letter-spacing: .2em; color: var(--buz); }
.gk-yazi { display: flex; flex-direction: column; gap: 6px; }
.gk-yazi small { font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--buz); }
.gk-yazi b { font-size: clamp(1.15rem, 1.5vw, 1.4rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.22; }
.gk-yazi em {
  font-style: normal; font-size: .9rem; color: rgba(255,255,255,.72); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.gk-ok {
  position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; border: 1px solid rgba(255,255,255,.25); transition: var(--gecis);
}
.gk:hover .gk-ok { background: var(--buz); border-color: var(--buz); color: #120f00; transform: rotate(-35deg); }

/* ---- blog: öne çıkan yazı ---- */
.yazi-one {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--yuvarlak); overflow: hidden; color: var(--metin);
}
.yazi-one:hover { color: var(--metin); border-color: color-mix(in srgb, var(--buz) 55%, var(--cizgi)); }
.yazi-one-gorsel { position: relative; min-height: 340px; overflow: hidden; }
.yazi-one-gorsel picture, .yazi-one-gorsel .gk-gorsel { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s cubic-bezier(.16,1,.3,1); }
.yazi-one:hover .gk-gorsel { transform: scale(1.05); }
.yazi-one-yazi { padding: clamp(24px, 3.4vw, 48px); display: flex; flex-direction: column; gap: 14px; justify-content: center; align-items: flex-start; }
.yazi-one-yazi small { color: var(--buz); font-weight: 800; letter-spacing: .16em; font-size: .74rem; }
.yazi-one-yazi b { font-size: clamp(1.5rem, 2.4vw, 2.2rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.15; }
.yazi-one-yazi em { font-style: normal; color: var(--metin-2); line-height: 1.7; }
.yazi-izgara { margin-top: 18px; }

/* ---- yan panel → alt "keşfet" bandı ---- */
.yan-bant { padding-block: clamp(48px, 6vw, 84px); }
.yan--yatay {
  position: static; display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.yan-kutu { background: var(--kart); border-color: var(--cizgi); }
.yan-kutu h4 { color: var(--buz); letter-spacing: .2em; }

/* ---- iletişim ---- */
.ilet { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.ilet-kartlar { display: flex; flex-direction: column; gap: 12px; }
.ilet-kart {
  display: flex; flex-direction: column; gap: 6px; padding: clamp(20px, 2.4vw, 30px);
  background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--yuvarlak); color: var(--metin);
  transition: var(--gecis);
}
a.ilet-kart:hover { border-color: color-mix(in srgb, var(--buz) 60%, var(--cizgi)); transform: translateY(-2px); color: var(--metin); }
.ilet-kart small { font-size: .72rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--buz); }
.ilet-kart b { font-size: clamp(1.15rem, 1.6vw, 1.45rem); font-weight: 800; letter-spacing: -.015em; line-height: 1.3; }
.ilet-kart span { color: var(--metin-2); font-size: .93rem; }
.ilet-kart--vurgu { background: linear-gradient(140deg, color-mix(in srgb, var(--buz) 16%, var(--kart)), var(--kart) 70%);
  border-color: color-mix(in srgb, var(--buz) 45%, var(--cizgi)); }
.ilet-kart--vurgu b { font-size: clamp(1.7rem, 2.6vw, 2.3rem); background: var(--altin-degrade); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ilet-form {
  background: var(--kart); border: 1px solid var(--cizgi); border-radius: calc(var(--yuvarlak) + 4px);
  padding: clamp(24px, 3.4vw, 48px); box-shadow: var(--golge); scroll-margin-top: 100px;
}
.ilet-form h2 { font-size: clamp(1.6rem, 2.6vw, 2.3rem); }
.ilet-form > p { margin-top: 10px; margin-bottom: 26px; }
.ilet-form .bildirim { margin-bottom: 18px; }
.form-izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.alan--tam { grid-column: 1 / -1; }
.alan input, .alan textarea, .alan select { border-radius: 12px; padding: 14px 16px; background: var(--zemin-2); }
.alan input:focus, .alan textarea:focus { border-color: var(--buz); box-shadow: 0 0 0 4px color-mix(in srgb, var(--buz) 18%, transparent); }
.bal { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.harita-bant { position: relative; height: clamp(320px, 38vw, 480px); border-block: 1px solid var(--cizgi); }
.harita-bant iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(.85) invert(.9) contrast(.9); }
:root[data-tema="acik"] .harita-bant iframe { filter: grayscale(.4); }

/* ---- bölgeler sayfası ---- */
.bolge-grup + .bolge-grup { margin-top: clamp(40px, 5vw, 72px); }
.bolge-grup-bas { display: flex; align-items: baseline; gap: 16px; padding-bottom: 18px; margin-bottom: 22px; border-bottom: 1px solid var(--cizgi); }
.bolge-grup-bas span { color: var(--buz); font-weight: 800; font-size: .9rem; letter-spacing: .1em; }
.bolge-izgara { list-style: none; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.bolge-izgara a {
  display: flex; flex-direction: column; gap: 2px; padding: 14px 18px; height: 100%;
  background: var(--kart); border: 1px solid var(--cizgi); border-radius: 14px; color: var(--metin); transition: var(--gecis);
}
.bolge-izgara a:hover { border-color: var(--buz); transform: translateY(-2px); color: var(--metin); }
.bolge-izgara b { font-weight: 800; font-size: 1.02rem; }
.bolge-izgara small { color: var(--metin-3); font-size: .8rem; }
.bolge-izgara a.bolge-ana { background: linear-gradient(140deg, color-mix(in srgb, var(--buz) 18%, var(--kart)), var(--kart)); border-color: color-mix(in srgb, var(--buz) 50%, var(--cizgi)); }
.bolge-izgara a.bolge-ana b { color: var(--buz); }

/* ---- alt bilgi bölge şeridi: kısaldı ---- */
.alt-bolge-hub--ana { color: var(--buz) !important; font-weight: 800; }

@media (max-width: 900px) {
  .ilet { grid-template-columns: minmax(0, 1fr); }
  .yazi-one { grid-template-columns: minmax(0, 1fr); }
  .yazi-one-gorsel { min-height: 240px; }
}
@media (max-width: 620px) {
  .form-izgara { grid-template-columns: minmax(0, 1fr); }
  .sayfa-bas { min-height: 340px; padding-bottom: 44px; }
  .sayfa-ic:not(.kaydi) .menu a { color: var(--metin-2); }
}

/* öne çıkan yazı görseli kart zemininin arkasına düşmesin */
.yazi-one { isolation: isolate; }
.yazi-one-gorsel .gk-gorsel { z-index: 0; }


/* =========================================================================
   HAKKIMIZDA (2026-10)
   ========================================================================= */
.manifesto { padding-block: clamp(64px, 9vw, 130px); }
.manifesto-metin {
  font-size: clamp(1.7rem, 3.6vw, 3.2rem); line-height: 1.22; font-weight: 700; letter-spacing: -.03em;
  color: var(--metin); max-width: 24ch; text-wrap: balance;
}
.manifesto-metin::first-line { color: var(--buz); }

.hk-metin { display: grid; grid-template-columns: minmax(0, .55fr) minmax(0, 1.45fr); gap: clamp(24px, 6vw, 100px); align-items: start; }
.hk-yan { position: sticky; top: 110px; display: flex; flex-direction: column; gap: 22px; }
.hk-logo { width: min(100%, 260px); height: auto; opacity: .95; }
.hk-icerik { max-width: 70ch; font-size: 1.06rem; }
.hk-icerik > p:first-child { font-size: 1.25rem; color: var(--metin); font-weight: 700; }
.hk-icerik p { line-height: 1.85; }

.os--genis { aspect-ratio: 21 / 9; }

.mv { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 18px; }
.mv-kart {
  position: relative; display: flex; flex-direction: column; gap: 14px; padding: clamp(28px, 4vw, 52px);
  background: var(--kart); border: 1px solid var(--cizgi); border-radius: calc(var(--yuvarlak) + 4px); color: var(--metin);
  overflow: hidden; transition: var(--gecis);
}
.mv-kart::before {
  content: ""; position: absolute; inset: auto -30% -60% auto; width: 70%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--buz) 22%, transparent), transparent 70%); pointer-events: none;
}
.mv-kart:hover { border-color: color-mix(in srgb, var(--buz) 60%, var(--cizgi)); transform: translateY(-3px); color: var(--metin); }
.mv-no { font-size: .78rem; font-weight: 800; letter-spacing: .22em; color: var(--buz); }
.mv-kart h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); }
.mv-kart p { color: var(--metin-2); max-width: 52ch; }
.mv-ok { position: absolute; top: 24px; right: 24px; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--cizgi); transition: var(--gecis); }
.mv-kart:hover .mv-ok { background: var(--buz); border-color: var(--buz); color: #120f00; transform: rotate(-35deg); }

/* ---- kayan proje şeridi ---- */
.serit { position: relative; display: flex; align-items: center; gap: 0; background: #050505; border-block: 1px solid #1c1c1f; overflow: hidden; }
.serit-etiket {
  position: relative; z-index: 2; flex: none; padding: 26px var(--yan-bosluk); background: #050505;
  font-size: .72rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--buz);
  box-shadow: 30px 0 30px #050505;
}
.serit-kayan { display: flex; width: max-content; }
.serit-kayan ul { display: flex; list-style: none; padding: 0; margin: 0; flex: none; }
.serit-kayan li { display: flex; align-items: center; }
.serit-kayan li::after { content: "✦"; color: var(--buz); font-size: .7rem; margin-inline: 30px; opacity: .8; }
.serit-kayan a { color: #d9d4c7; font-size: clamp(1.05rem, 1.6vw, 1.4rem); font-weight: 700; white-space: nowrap; letter-spacing: -.01em; }
.serit-kayan a:hover { color: var(--buz); }
.js-hareket .serit-kayan { animation: kay 48s linear infinite; }
.serit:hover .serit-kayan { animation-play-state: paused; }
@keyframes kay { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.final--kisa { min-height: clamp(380px, 40vw, 520px); }

@media (max-width: 900px) {
  .hk-metin { grid-template-columns: minmax(0, 1fr); }
  .hk-yan { position: static; flex-direction: row; align-items: center; justify-content: space-between; }
  .hk-logo { width: 180px; }
  .os--genis { aspect-ratio: 4 / 3; }
}
@media (max-width: 620px) {
  .serit-etiket { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .serit-kayan { animation: none !important; }
  .serit { overflow-x: auto; }
}


/* ---- HAKKIMIZDA v2: görsel hikâye (2026-10) ---- */
.hk-giris { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: clamp(28px, 6vw, 96px); align-items: center; }
.hk-cerceve { position: relative; margin: 0; aspect-ratio: 4 / 5; border-radius: calc(var(--yuvarlak) + 6px); overflow: visible; }
.hk-cerceve::before {
  content: ""; position: absolute; inset: 18px -18px -18px 18px; border: 1px solid color-mix(in srgb, var(--buz) 55%, transparent);
  border-radius: inherit; z-index: 0;
}
.hk-cerceve picture, .hk-cerceve-gorsel { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; border-radius: inherit; }
.hk-cerceve-gorsel { object-fit: cover; }
.hk-rozet {
  position: absolute; z-index: 2; left: -22px; bottom: 34px; padding: 18px 24px; border-radius: 16px;
  background: #0b0b0c; border: 1px solid color-mix(in srgb, var(--buz) 45%, var(--cizgi)); box-shadow: var(--golge);
  display: flex; flex-direction: column; gap: 2px;
}
.hk-rozet b { font-size: 2.2rem; font-weight: 800; letter-spacing: -.04em; line-height: 1;
  background: var(--altin-degrade); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hk-rozet span { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--metin-3); font-weight: 700; }

.adimlar { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; position: relative; }
.adimlar::before {
  content: ""; position: absolute; left: 0; right: 0; top: 27px; height: 1px;
  background: linear-gradient(90deg, var(--buz), color-mix(in srgb, var(--buz) 15%, transparent));
}
.adim { position: relative; padding-top: 74px; }
.adim-no {
  position: absolute; top: 0; left: 0; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: var(--zemin); border: 1px solid var(--buz); color: var(--buz); font-weight: 800; letter-spacing: .06em;
  box-shadow: 0 0 0 8px var(--zemin);
}
.adim h3 { font-size: clamp(1.2rem, 1.7vw, 1.5rem); margin-bottom: 10px; }
.adim p { font-size: .96rem; }

.mozaik {
  display: grid; gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(160px, 16vw, 240px);
}
.mozaik-oge { position: relative; overflow: hidden; border-radius: 16px; isolation: isolate; background: var(--kart); }
/* 8 kare = 4 sütun × 4 satır = 16 hücre: 1 (2×2) + 4,5 (1×2) + 6,7,8 (2×1) + 2,3 (1×1). dense boşluk bırakmaz. */
.mozaik { grid-auto-flow: dense; }
.mozaik-oge--1 { grid-column: span 2; grid-row: span 2; }
.mozaik-oge--4, .mozaik-oge--5 { grid-row: span 2; }
.mozaik-oge--6, .mozaik-oge--7, .mozaik-oge--8 { grid-column: span 2; }
.mozaik-oge picture, .mozaik-gorsel { position: absolute; inset: 0; width: 100%; height: 100%; }
.mozaik-gorsel { object-fit: cover; transition: transform 1.4s cubic-bezier(.16,1,.3,1), filter .6s; filter: saturate(.9); }
.mozaik-oge::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5,5,5,.85), transparent 55%); opacity: 0; transition: opacity .5s; }
.mozaik-oge span {
  position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 2; color: #fff; font-weight: 700; font-size: .92rem; line-height: 1.35;
  opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .5s;
}
.mozaik-oge:hover .mozaik-gorsel { transform: scale(1.07); filter: saturate(1.05); }
.mozaik-oge:hover::after, .mozaik-oge:focus-visible::after { opacity: 1; }
.mozaik-oge:hover span, .mozaik-oge:focus-visible span { opacity: 1; transform: none; }

.zaman { list-style: none; padding: 0; margin: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr); gap: 18px; overflow-x: auto; padding-bottom: 8px; }
.zaman li { padding: 26px; border-top: 2px solid var(--buz); background: var(--kart); border-radius: 0 0 16px 16px; }
.zaman-yil { display: block; font-size: 2.4rem; font-weight: 800; letter-spacing: -.04em; color: var(--buz); line-height: 1; margin-bottom: 14px; }
.zaman h3 { margin-bottom: 8px; }

.hk-devam { max-width: 860px; margin-inline: auto; border: 1px solid var(--cizgi); border-radius: var(--yuvarlak); background: var(--kart); }
.hk-devam summary {
  cursor: pointer; list-style: none; padding: 22px 28px; font-weight: 800; display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.hk-devam summary::-webkit-details-marker { display: none; }
.hk-devam summary::after { content: "+"; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--cizgi); color: var(--buz); flex: none; }
.hk-devam[open] summary::after { content: "−"; background: var(--buz); color: #120f00; border-color: var(--buz); }
.hk-devam .hk-icerik { padding: 0 28px 28px; max-width: none; }

@media (max-width: 1000px) {
  .adimlar { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
  .adimlar::before { display: none; }
}
@media (max-width: 900px) {
  .hk-giris { grid-template-columns: minmax(0, 1fr); }
  .hk-cerceve { aspect-ratio: 4 / 3; margin-right: 18px; }
  .hk-rozet { left: 12px; }
  .mozaik { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mozaik-oge--1, .mozaik-oge--6 { grid-column: span 2; grid-row: span 1; }
  .mozaik-oge--4, .mozaik-oge--5, .mozaik-oge--7, .mozaik-oge--8 { grid-row: span 1; grid-column: auto; }
  .mozaik-oge span { opacity: 1; transform: none; font-size: .82rem; }
  .mozaik-oge::after { opacity: 1; }
}
@media (max-width: 560px) {
  .adimlar { grid-template-columns: minmax(0, 1fr); }
}


/* =========================================================================
   FİYAT HESAPLAMA (2026-10)
   ========================================================================= */
.arac {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 0;
  background: var(--kart); border: 1px solid var(--cizgi); border-radius: calc(var(--yuvarlak) + 6px);
  overflow: hidden; box-shadow: var(--golge);
}
.arac .hesap { max-width: none; margin: 0; padding: clamp(24px, 3.4vw, 48px); display: flex; flex-direction: column; gap: 4px; }
.arac .hesap select, .arac .hesap input[type="text"] { font-size: 1.08rem; padding: 16px 18px; }
.hizli-alan { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 22px; }
.hizli-alan button {
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--cizgi); background: transparent; color: var(--metin-2);
  font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer; transition: var(--gecis);
}
.hizli-alan button::after { content: " m²"; font-weight: 500; opacity: .7; }
.hizli-alan button:hover, .hizli-alan button.secili { border-color: var(--buz); color: var(--buz); background: color-mix(in srgb, var(--buz) 8%, transparent); }
.arac .hesap .dugme { align-self: flex-start; }

.arac .hesap-sonuc {
  margin: 0; border: 0; border-left: 1px solid var(--cizgi); border-radius: 0;
  padding: clamp(24px, 3.4vw, 48px); display: flex; flex-direction: column; gap: 0;
  background: radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--buz) 12%, transparent), transparent 60%), var(--zemin-2);
}
.arac .hesap-sonuc.gizli { display: flex; }
.hesap-buyuk { display: flex; flex-direction: column; gap: 6px; padding-bottom: 22px; margin-bottom: 14px; border-bottom: 1px solid var(--cizgi); }
.hesap-buyuk small { font-size: .74rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--buz); }
.hesap-buyuk b {
  font-size: clamp(2.2rem, 4.6vw, 3.6rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.05;
  background: var(--altin-degrade); -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums;
}
.hesap-buyuk span { color: var(--metin-2); font-weight: 700; font-size: 1.05rem; }
.hesap-bos-not { display: none; font-style: normal; color: var(--metin-3); font-size: .92rem; }
.hesap-sonuc--bos .hesap-bos-not { display: block; }
.hesap-sonuc--bos .hesap-satir, .hesap-sonuc--bos .hesap-kur, .hesap-sonuc--bos .hesap-uyari { opacity: .35; }
.hesap-satir { border-color: var(--cizgi); }
.hesap-satir--toplam b { color: var(--buz); }
.arac .hesap-sonuc .dugme { margin-top: 22px; align-self: flex-start; }

.tablo { border-radius: var(--yuvarlak); overflow: hidden; }
.tablo th { background: var(--kart-ust); color: var(--buz); letter-spacing: .08em; text-transform: uppercase; font-size: .78rem; }
.tablo-grup td { background: color-mix(in srgb, var(--buz) 9%, var(--kart)); font-weight: 800; }
.tablo-grup a { color: var(--buz); }

/* =========================================================================
   GALERİ (2026-10)
   ========================================================================= */
.galeri-sekmeler {
  position: sticky; top: 86px; z-index: 20; display: flex; flex-wrap: wrap; gap: 8px;
  padding: 12px; margin-bottom: 36px; border-radius: 999px;
  background: color-mix(in srgb, var(--zemin) 82%, transparent); backdrop-filter: blur(10px);
  border: 1px solid var(--cizgi);
}
.galeri-sekme {
  padding: 9px 16px; border-radius: 999px; font-weight: 700; font-size: .9rem; color: var(--metin-2);
  border: 1px solid transparent; transition: var(--gecis);
}
.galeri-sekme span { color: var(--metin-3); font-weight: 600; margin-left: 4px; }
.galeri-sekme:hover { color: var(--metin); border-color: var(--cizgi); }
.galeri-sekme--aktif, .galeri-sekme--aktif:hover { background: var(--buz); color: #120f00; border-color: var(--buz); }
.galeri-sekme--aktif span { color: #3d3300; }
.galeri-grup + .galeri-grup { margin-top: clamp(48px, 6vw, 80px); }
.galeri-grup-bas { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap;
  padding-bottom: 16px; margin-bottom: 20px; border-bottom: 1px solid var(--cizgi); }
.galeri-grup-bag { color: var(--buz); font-weight: 700; }
.galeri-izgara { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.galeri-kart { position: relative; margin: 0; border-radius: 16px; overflow: hidden; background: var(--kart); aspect-ratio: 4 / 3; }
.galeri-ac { position: absolute; inset: 0; padding: 0; border: 0; background: none; cursor: zoom-in; display: block; width: 100%; height: 100%; }
.galeri-ac picture, .galeri-gorsel { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; }
.galeri-gorsel { transition: transform 1.3s cubic-bezier(.16,1,.3,1), filter .5s; filter: saturate(.92); }
.galeri-kart:hover .galeri-gorsel { transform: scale(1.06); filter: saturate(1.05); }
.galeri-kart figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; pointer-events: none;
  padding: 40px 16px 14px; color: #fff; font-size: .88rem; font-weight: 700; line-height: 1.35;
  background: linear-gradient(0deg, rgba(5,5,5,.88), transparent);
  opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .4s;
}
.galeri-kart:hover figcaption, .galeri-ac:focus-visible + figcaption { opacity: 1; transform: none; }
.galeri-buyutec {
  position: absolute; top: 12px; right: 12px; z-index: 2; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; background: var(--buz); color: #120f00; opacity: 0; transform: scale(.8); transition: var(--gecis);
}
.galeri-kart:hover .galeri-buyutec { opacity: 1; transform: none; }
.buyutec { background: rgba(3,3,3,.94) !important; backdrop-filter: blur(6px); }
.buyutec-kapat, .buyutec-ok { border-radius: 50% !important; }
.buyutec-ok:hover, .buyutec-kapat:hover { background: var(--buz) !important; color: #120f00 !important; }
.buyutec figcaption { color: rgba(255,255,255,.8); }

@media (max-width: 900px) {
  .arac { grid-template-columns: minmax(0, 1fr); }
  .arac .hesap-sonuc { border-left: 0; border-top: 1px solid var(--cizgi); }
}
@media (max-width: 720px) {
  .galeri-sekmeler { position: static; border-radius: 18px; }
  .galeri-kart figcaption { opacity: 1; transform: none; font-size: .8rem; }
}

/* düzeltmeler: hesap sonucu sütunu tam doldursun · çok satırlı sekme çerçevesi */
.arac .hesap-sonuc { max-width: none; width: auto; }
.galeri-sekmeler { border-radius: 22px; }

@media (max-width: 720px) {
  /* uzun sekme adı (361px) telefonda sayfayı 4px taşırıyordu → yana kayan şerit */
  .galeri-sekmeler { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .galeri-sekmeler::-webkit-scrollbar { display: none; }
  .galeri-sekme { flex: none; white-space: nowrap; }
}

/* eski ızgaralar: sütun en küçük genişliği EKRANI AŞAMAZ (360px telefonda 20px taşıyordu) */
.izgara--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); }
.izgara--2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); }
.izgara--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }

/* Giriş: zemin fotoğraflarında konu ALTTA (parlayan yüzey). Dikey kaynaklarda üstteki raf/tavan yerine zemin görünsün. */
.hero--sinema .slayt-gorsel { object-position: center 78%; }

/* ---- 404 (2026-10) ---- */
.dortyuz { position: relative; isolation: isolate; overflow: hidden; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; text-align: center; background: #050505; padding-block: 120px 80px; }
.dortyuz picture, .dortyuz-gorsel { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; object-fit: cover; filter: brightness(.28) saturate(.7); }
.dortyuz::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 60% at 50% 50%, transparent, rgba(5,5,5,.85)); }
.dortyuz-ic { max-width: 720px; margin-inline: auto; }
.dortyuz-no { display: block; font-size: clamp(6rem, 22vw, 15rem); font-weight: 800; letter-spacing: -.06em; line-height: .9; background: var(--altin-degrade); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 18px; }
.dortyuz h1 { color: #fff; font-size: clamp(1.8rem, 4vw, 3rem); }
.dortyuz p { color: rgba(255,255,255,.75); margin-top: 14px; }
.dortyuz .hero-eylem { margin-top: 30px; flex-wrap: wrap; }

/* Okuma metni içindeki ara başlıklar bölüm başlığı kadar büyük olmasın (OSB/rehber/hizmet içerikleri) */
.icerik h2 { font-size: clamp(1.45rem, 2.3vw, 2rem); letter-spacing: -.02em; line-height: 1.2; }
.icerik h3 { font-size: clamp(1.12rem, 1.6vw, 1.32rem); }
.icerik h2::before { content: ""; display: block; width: 36px; height: 2px; background: var(--buz); margin-bottom: 14px; }

/* Giriş videosu: görselin ÜSTÜNDE, oynamaya başlayınca yumuşakça belirir. */
.hero--sinema .slayt-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: 0; transition: opacity 1.2s ease; }
.hero--sinema .slayt-video.oynuyor { opacity: 1; }

/* Videolu slayt: Blender videosunda Yıldızel logosu SAĞ ALT zeminde belirir.
   Genel karartma (alttan %86 siyah) onu yarı yarıya örtüyordu → koyuluk yalnız
   yazıların olduğu SOL tarafta; sağ alt açık kalır. */
.hero--sinema .slayt--video.slayt--gorselli::before {
  background:
    linear-gradient(90deg, rgba(5,5,5,.88) 0%, rgba(5,5,5,.55) 38%, rgba(5,5,5,.08) 62%, transparent 75%),
    linear-gradient(0deg, rgba(5,5,5,.75) 0%, transparent 14%),
    linear-gradient(180deg, rgba(5,5,5,.55) 0%, transparent 18%);
}

@media (max-width: 720px) {
  /* Dikey ekran videonun ~%26 genişliğini gösterir; tarama sağ tarafta başladığı için oraya kaydır. */
  .hero--sinema .slayt-video { object-position: 74% center; }
}