/*
 * STORY KABUK — canlı storyajans.com (WordPress / Enfold) temasının ortak üst / alt iskeleti. R30: canlı temayla BİREBİR (ölçüler canlı sayfalardan 9 genişlikte alındı;
 * menü katmanı Enfold'un "av-burger-overlay" kurallarının karşılığı — wp-content/themes/enfold/css/layout.css).
 * TEK KAYNAK: story-assets/story-kabuk.css (+ story-kabuk.js). Cast sitesi (cast/css · cast/js), proje sunumu (proje/css · proje/js) ve başvuru sayfaları (ajans-basvuru/)
 * bu dosyanın AYNI kopyasını yükler (scripts/kabuk-esitle.sh çoğaltır; scripts/cloud-dev/qa/r28_kabuk.js kopyaların aynılığını denetler).
 * Sayfa kipi gövde sınıfıyla seçilir:  sw-mod-cast (cast sitesi: bootstrap kapsayıcı 1170 / 970 / 750, koyu gri #383838 sayfa)  ·  sw-mod-wp (Enfold kapsayıcı 1210, beyaz sayfa).
 * Üst çubuk / menü / alt bant sabit renklidir (jetonlara bağlı değil): canlı sitede açık / koyu tema yoktur, herkese açık sayfalar her zaman canlıdaki görünümdedir.
 */
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/montserrat-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/montserrat-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root { --sw-font-ust: "Montserrat", Arial, Helvetica, sans-serif; --sw-hi: 88px; --sw-ov-h: 90px; --kb-bar-bg: #212121; --kb-grey: #383838; }
html { background: #171717; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; white-space: nowrap; }
.sw-i { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }

/* ---------- kapsayıcı genişliği (--sw-cw): üst çubuk, başlık bandı, alt bant ve sayfa içeriği AYNI hizayı kullanır ---------- */
body.sw-mod-wp { --sw-cw: min(1210px, calc(100% - 100px)); background: #fff; color: #444; }                                  /* Enfold .container: en çok 1210, yanlarda 50 px */
body.sw-mod-cast { --sw-cw: 1140px; background: #383838; color: #fff; }                                                          /* bootstrap .container 1170 − 2 × 15 */
@media (max-width: 1199px) { body.sw-mod-cast { --sw-cw: 940px; } }
@media (max-width: 991px) { body.sw-mod-cast { --sw-cw: 720px; } }
@media (max-width: 767px) { body.sw-mod-wp, body.sw-mod-cast { --sw-cw: 85%; } }                                                  /* telefon: genişliğin %85'i */
.sw-wrap { width: var(--sw-cw, 1140px); max-width: 100%; margin: 0 auto; padding: 0; box-sizing: border-box; }

/* ============================ ÜST ÇUBUK ============================ */
.sw-header { position: sticky; top: 0; z-index: 1000; background: #fff; border-top: 1px solid #e1e1e1; border-bottom: 1px solid #e1e1e1; box-sizing: border-box; color: #080808; transition: box-shadow .25s ease; }
.sw-header.sw-kucuk { box-shadow: 0 6px 22px -16px rgba(15, 18, 22, .45); }
.sw-header-in { position: relative; display: flex; align-items: flex-start; justify-content: space-between; height: var(--sw-hi); transition: height .25s ease; }
.sw-logo { position: relative; z-index: 0; display: block; flex: 0 0 auto; line-height: 0; }
.sw-logo img { display: block; width: 80px; height: 80px; object-fit: contain; transition: width .25s ease, height .25s ease; }
body.sw-mod-cast .sw-logo img { width: 88px; height: 88px; }
.sw-header.sw-kucuk .sw-header-in { height: 62px; }
.sw-header.sw-kucuk .sw-logo img { width: 60px; height: 60px; }
.sw-tools { position: relative; z-index: 10; display: flex; align-items: center; flex: 0 0 auto; margin-left: auto; height: 100%; }
@media (max-width: 991px) { .sw-header { --sw-hi: 90px; } body.sw-mod-cast .sw-logo img { width: 90px; height: 90px; } }
@media (max-width: 767px) {
	.sw-header { --sw-hi: 80px; }
	body.sw-mod-cast .sw-logo img { width: 80px; height: 80px; }
	body.sw-mod-cast .sw-logo { margin-left: 8.5vw; }                                                                             /* canlı cast sayfalarında telefonda logo kapsayıcıdan %8,5 içeride */
}

/* hamburger: üç çizgi (35 px · 3 px · yuvarlak uç · 10 px aralık) → döner ve X olur (Enfold "av-hamburger") */
.sw-burger { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; color: #080808; cursor: pointer; transition: opacity .15s; }
@media (max-width: 991px) { .sw-burger { width: 55px; } }
.sw-burger:hover { background: transparent; opacity: .6; }
.sw-bg { position: relative; display: block; width: 35px; height: 24px; }
.sw-bg-in, .sw-bg-in::before, .sw-bg-in::after { position: absolute; left: 0; width: 35px; height: 3px; border-radius: 3px; background: currentColor; transition: transform .22s cubic-bezier(.55, .055, .675, .19); }
.sw-bg-in { top: 50%; margin-top: -1.5px; }
.sw-bg-in::before, .sw-bg-in::after { content: ""; display: block; }
.sw-bg-in::before { top: -10px; transition: top .1s .14s ease-in, opacity .1s ease-in; }
.sw-bg-in::after { bottom: -10px; transition: bottom .1s .14s ease-in, transform .22s cubic-bezier(.55, .055, .675, .19); }
.sw-burger[aria-expanded="true"] { color: #fff; }
.sw-burger[aria-expanded="true"] .sw-bg-in { transform: rotate(225deg); transition-delay: .12s; transition-timing-function: cubic-bezier(.215, .61, .355, 1); }
.sw-burger[aria-expanded="true"] .sw-bg-in::before { top: 0; opacity: 0; transition: top .1s ease-out, opacity .1s .12s ease-out; }
.sw-burger[aria-expanded="true"] .sw-bg-in::after { bottom: 0; transform: rotate(-90deg); transition: bottom .1s ease-out, transform .22s .12s cubic-bezier(.215, .61, .355, 1); }
body.sw-menu-open { overflow: hidden; }
body.sw-menu-open .sw-logo { z-index: 10; }
body.sw-menu-open .sw-logo img { filter: brightness(0) invert(1); }   /* R31: katman koyu → "SA" logosu beyaz ve katmanın üstünde */

/* ============================ TAM EKRAN KATMAN MENÜ (Enfold "av-burger-overlay") ============================ */
.sw-ov { position: fixed; inset: 0; z-index: 5; opacity: 0; visibility: hidden; overflow: hidden; transition: opacity .4s ease, visibility 0s linear .4s; }
.sw-ov:focus { outline: 0; }
.sw-ov.open { opacity: 1; visibility: visible; transition: opacity .4s ease, visibility 0s; }
.sw-ov-bg { position: fixed; inset: 0; z-index: 3; background: #000; opacity: 1; }   /* R31: eskiden .9 → arkadaki sayfa (form · koyu başlık bandı) menünün altında gölge gibi görünüyordu */
.sw-ov-scroll { position: absolute; inset: 0; z-index: 10; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.sw-ov-scroll::-webkit-scrollbar { display: none; }   /* R31: klasik kaydırma çubuğu (Windows · fareli Mac) içerik taşınca belirip ortalı menüyü yana kaydırıyordu; çubuk gizli, tekerlek / dokunma kaydırması çalışır */
.sw-ov-nav { position: relative; box-sizing: border-box; min-height: 100%; display: flex; flex-direction: column; justify-content: flex-start; padding: var(--sw-ov-ust, var(--sw-ov-h)) 0 14px; text-align: center; font-family: var(--sw-font-ust); }   /* R31: eskiden justify-content:center → alt menü açılıp kapanınca TÜM maddeler yukarı / aşağı kayıyor, imleç başka maddenin üstünde kalıyordu; artık üst konum menü açılırken bir kez hesaplanır (story-kabuk.js: --sw-ov-ust) */
.sw-ov-ul { margin: 0; padding: 0; list-style: none; }
.sw-ov-li { position: relative; top: 18px; padding: .3em 0; margin: 0; font-size: 25px; line-height: 1.6em; opacity: 0; transition: opacity .3s ease-out, top .3s ease-out; }
.sw-ov.open .sw-ov-li { top: 0; opacity: 1; transition-delay: calc((var(--i, 0) + 1) * 125ms); }
.sw-ov-a { position: relative; display: block; margin: 0; padding: 0; color: #fff; font-weight: 400; line-height: inherit; text-decoration: none; transition: none; }
.sw-ov-a:hover, .sw-ov-a:focus, .sw-ov-a:active { color: #fff; text-decoration: none; opacity: .7; }
.sw-ov-a:focus-visible, .sw-ov-sub a:focus-visible { outline: 1px solid rgba(255, 255, 255, .5); outline-offset: -1px; }
.sw-ov-t { font-weight: 400; }   /* canlıda CSS 100 yazar ama tema Montserrat'ın yalnız normal (400) yüzünü yükler → 400 görünür */
.sw-ov-s { display: block; margin: -3px 0 10px; font-size: .6em; line-height: 1.2em; font-weight: 400; opacity: .7; }   /* R31: -10px / 13px → 'y' gibi inen harfler alt yazıya değiyordu */
.sw-ov-ind { position: absolute; right: 30px; top: 50%; margin-top: -9px; width: 25px; height: 20px; opacity: .5; transition: transform .2s ease-out; }
.sw-ov-ind::before { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -4px 0 0 -4px; border-top: 1.5px solid #fff; border-right: 1.5px solid #fff; transform: rotate(45deg); }
.sw-ov-li.av-show-submenu > .sw-ov-a .sw-ov-ind { transform: rotate(90deg); }
/* alt menü: varsayılan KAPALI; fare üzerine gelince / dokununca açılır (jQuery slideDown "fast" ≈ 200 ms) */
.sw-ov-sub { max-height: 0; margin: 0; padding: 0; overflow: hidden; list-style: none; transition: max-height .22s ease; }
.sw-ov-li.open > .sw-ov-sub { max-height: 320px; }
.sw-ov-sub > li { margin: 0; padding: .5em 0; font-size: .6em; line-height: 1.4em; }
.sw-ov-sub a { display: block; color: #fff; font-size: inherit; font-weight: 400; line-height: inherit; text-decoration: none; }
.sw-ov-sub a:hover, .sw-ov-sub a:focus-visible { opacity: .7; color: #fff; text-decoration: none; }
.sw-ov-sub a[aria-current="page"] { font-weight: 700; }
/* çerçeveli son madde (Başvuru Formu = Enfold "av-menu-button") */
.sw-ov-li.sw-ov-btn { margin-top: .4em; }
.sw-ov-li.sw-ov-btn > .sw-ov-a .sw-ov-t { display: inline; padding: .5em 1.5em; border: 2px solid #fff; font-weight: 400; }
.sw-ov-li.sw-ov-btn > .sw-ov-a:hover { opacity: 1; }
.sw-ov-li.sw-ov-btn > .sw-ov-a:hover .sw-ov-t { opacity: .7; }
/* yasal bağlar + dil (canlıda yok: alt banttan buraya taşındı — alt bant canlıdaki gibi yalnız telif + simgeler) */
.sw-ov-ek { position: static; margin: auto 0 0; padding: 26px 20px 0; color: rgba(255, 255, 255, .55); font-size: 11px; line-height: 1.7; }   /* R31: eskiden absolute bottom:14px → dar ekranda (320 px · 360 px alt menü açıkken) 3-4 satıra sarılan yasal bağlar "Başvuru Formu" düğmesinin üstüne biniyordu; artık akışta: kısa içerikte en alta oturur (margin-top:auto), uzun içerikte düğmenin ALTINDA ≥ 26 px boşlukla kayar */
.sw-ov-ek a { display: inline-block; margin: 0 9px; padding: 3px 0; color: rgba(255, 255, 255, .75); font-weight: 400; text-decoration: none; }
.sw-ov-ek a:hover { color: #fff; text-decoration: underline; }
.sw-ov-ek .story-lang-switcher { display: inline-flex; gap: 2px; margin: 0 6px; vertical-align: middle; }
.sw-ov-ek .story-lang-switcher a { margin: 0; padding: 3px 7px; border-radius: 3px; font-weight: 700; font-size: 10.5px; letter-spacing: .04em; }
.sw-ov-ek .story-lang-switcher a.active { background: #eee; color: #171717; }
.sw-ov-ek .story-lang-switcher .sep { display: none; }
/* R31: kısa pencere (13" MacBook'ta Chrome çubukları sonrası ≈ 700 px): 7 madde + açılan alt menü sığmıyor, liste kayıyordu → yazı ve satır aralığı küçülür (canlıdaki 25 px büyüklük ≥ 781 px yükseklikte aynen kalır) */
@media (max-height: 780px) {
	.sw-ov-li { font-size: 21px; padding: .22em 0; }
	.sw-ov-s { margin: -3px 0 7px; }
	.sw-ov-sub > li { padding: .42em 0; }
}
@media (max-height: 600px) { .sw-ov-li { font-size: 18px; padding: .18em 0; } .sw-ov-s { margin: -2px 0 5px; } .sw-ov-sub > li { padding: .36em 0; } }
@media (prefers-reduced-motion: reduce) { .sw-ov-li { top: 0; opacity: 1; transition: none; } }

/* ============================ SAYFA BAŞLIĞI ============================ */
/* ortalı koyu bant (Hakkımızda · İletişim · Başvuru Formu · yasal metinler): Enfold renk bölümü #212121, 155 px */
.kb-bar { display: flex; align-items: center; justify-content: center; min-height: 155px; box-sizing: border-box; padding: 34px 0; background: var(--kb-bar-bg); color: #fff; text-align: center; }
.kb-bar-in { width: var(--sw-cw, 1140px); max-width: 100%; margin: 0 auto; box-sizing: border-box; }
.kb-bar h1 { margin: 0; color: #fff; font: 400 28px/1.1 var(--sw-font-ust); letter-spacing: 1px; text-transform: uppercase; overflow-wrap: anywhere; }
.kb-bar h1 strong { font-weight: 600; }
.kb-bar p { margin: 9px auto 0; max-width: 720px; color: #fff; font: 400 15px/1.3 var(--sw-font-ust); overflow-wrap: anywhere; }
.kb-bar .kb-rozet { display: inline-block; margin: 0 0 12px; padding: 2px 12px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px; color: rgba(255, 255, 255, .85); font: 600 11.5px/1.7 var(--sw-font-ust); letter-spacing: .09em; text-transform: uppercase; }
@media (max-width: 600px) { .kb-bar { padding: 28px 0; } .kb-bar h1 { font-size: 24px; } }
/* gri başlık satırı (Enfold "title_container": solda 16 px sayfa adı, sağda 11 px "Buradasınız: Anasayfa / …"; #383838, 58 px) */
.kb-ince { background: var(--kb-grey); color: #fff; font-family: var(--sw-font-ust); }
.kb-ince-in { display: flex; align-items: center; justify-content: space-between; gap: 6px 18px; min-height: 57px; }
.kb-ince h1 { margin: 0; color: #fff; font: 400 16px/36.8px var(--sw-font-ust); letter-spacing: normal; text-transform: none; }
.kb-yol { font: 400 11px/15px var(--sw-font-ust); color: #fff; text-align: right; }
.kb-yol a { padding: 0 3px; color: #fff; text-decoration: none; } .kb-yol a:hover { color: #fff; text-decoration: underline; }
.kb-yol .kb-ayrac { padding: 0 1px; }
@media (max-width: 767px) { .kb-ince-in { display: block; padding: 8px 0 7px; } .kb-yol { text-align: left; margin-top: -3px; } }

/* ============================ ALT BANT (Enfold "socket": #171717, 11 px, telif solda + beş sosyal simge sağda) ============================ */
.sw-footer { background: #171717; color: #eee; font: 400 11px/15.7143px Arial, Helvetica, sans-serif; border-top: 1px solid #171717; margin: 0; }
body.sw-mod-wp .sw-footer { border-top-color: #4d4d4d; }
.sw-footer-in { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; min-height: 50px; }
.sw-footer .copyright { display: inline-block; margin: 15px 0 0; color: #eee; font-weight: 400; }
.sw-social { display: flex; margin: 5px 0 0; padding: 0; list-style: none; }
.sw-social li { margin: 0; }
.sw-social a { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 0; border-radius: 50%; color: #cfcfcf; text-decoration: none; }
.sw-social a:hover { color: #fff; background: transparent; text-decoration: none; }
.sw-social .sw-i { width: 12px; height: 12px; stroke-width: 2; }
@media (max-width: 767px) { body.sw-mod-wp .sw-footer-in { min-height: 70px; } }
/* Cast Asistanı balonu (sağ altta sabit) alt bandın simgelerinin üstüne binmesin */
body:has(.story-asistan-dugme) .sw-footer-in { padding-right: max(0px, calc(84px - (100vw - var(--sw-cw)) / 2)); }   /* yalnız kapsayıcının sağ boşluğu balondan (76 px) dar olan genişliklerde pay bırakır */
.story-asistan-dugme { box-shadow: 0 10px 26px -10px rgba(15, 18, 22, .5), 0 0 0 2px rgba(255, 255, 255, .9); }

/* ev sahibi sayfanın genel bağlantı kuralları (".sb a { altı çizili }" gibi) üst çubuğu / menüyü / alt bandı bozmasın */
html .sw-header a, html .sw-ov a, html .sw-footer a, html .kb-bar a { text-decoration: none; }
html .sw-header a:hover, html .sw-header a:focus, html .sw-ov a:hover, html .sw-ov a:focus, html .sw-ov a:active, html .sw-footer a:hover, html .sw-footer a:focus, html .kb-bar a:hover { text-decoration: none; }   /* R31: başvuru sayfalarında ".sb a:hover { underline }" menüde hover'da altı çiziyordu, cast sayfalarında çizmiyordu → tutarsız */
/* R31: geçişler her sayfada AYNI: sayfanın kendi "a { transition: all .4s }" gibi kuralları menüde hover'ı yavaşlatmasın / farklılaştırmasın; hover kısa (150 ms) bir solma ile akıcı */
html .sw-ov a.sw-ov-a, html .sw-ov .sw-ov-sub a { transition: opacity .15s ease; }
html .sw-ov .sw-ov-t, html .sw-ov .sw-ov-s, html .sw-ov .sw-ov-ind { transition: none; }
html .sw-ov .sw-ov-ind { transition: transform .2s ease-out; }
html .sw-ov a.sw-ov-a, html .sw-ov a.sw-ov-a:hover { color: #fff; }
/* R31 alt bant: sosyal simgeler ve telif ev sahibi sayfanın bağlantı rengine karşı sabit (başvuru sayfalarında #444 → #171717 zeminde görünmüyordu; cast liste / profilde #fff, kılavuz / projede #cfcfcf: her sayfada farklıydı) */
html .sw-footer .sw-social a { color: #cfcfcf; background: transparent; opacity: 1; }
html .sw-footer .sw-social a:hover, html .sw-footer .sw-social a:focus-visible { color: #fff; background: transparent; }
html .sw-footer .copyright, html .sw-footer .copyright a { color: #eee; }
/* R31: alt menü ve alt yazı bağlantıları da ev sahibi sayfanın bağlantı rengine (başvuru sayfasında koyu gri #444 → siyah zeminde okunmuyordu) karşı sabit */
html .sw-ov .sw-ov-sub a, html .sw-ov .sw-ov-sub a:hover, html .sw-ov .sw-ov-sub a:focus { color: #fff; background: transparent; font-weight: 400; text-decoration: none; }
html .sw-ov .sw-ov-sub a[aria-current="page"] { font-weight: 700; }
html .sw-ov .sw-ov-ek a { color: rgba(255, 255, 255, .75); }
html .sw-ov .sw-ov-ek a:hover { color: #fff; }
html .sw-ov .sw-ov-ek .story-lang-switcher a.active { color: #171717; }