/* =====================================================================
   GOD OF INK — Ortak serit (header) ve alt bilgi (footer) stili

   Bu dosya index.php ile SEO acilis sayfalarinin PAYLASTIGI tek
   kaynaktir. Serit veya alt bilgide bir degisiklik gerekiyorsa
   yalnizca burasi duzenlenir.

   Iliskili dosyalar:
     parca-header.php  — serit + mobil menu isaretlemesi
     parca-footer.php  — alt bilgi isaretlemesi
   ===================================================================== */

:root {
    --primary-dark: #0a0a0a;
    --secondary-dark: #1a1a1a;
    --accent-red: #c91f1f;
    --accent-gold: #bd8e36;
    --text-light: #ffffff;
    --text-gray: #b0b0b0;
    --border-gray: #333333;
}

/* Header */
header {
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba(10, 10, 10, 0.95);
    backdrop-filter: blur(10px);
    z-index: 1000;
    border-bottom: 1px solid var(--border-gray);
    padding: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

header.scrolled {
    padding: 0;
    background: rgba(10, 10, 10, 0.98);
    box-shadow: 0 5px 30px rgba(201, 31, 31, 0.2);
    border-bottom: 2px solid var(--accent-red);
}

header.scrolled .logo img {
    height: 56px;
    width: auto;
}

header.scrolled .header-container {
    padding: 8px 32px;
}

.header-container {
    max-width: 1480px;
    margin: 0 auto;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 10px 32px;
}

.logo img {
    /* Logo dosyasi kare (1024x1024). En-boy orani sabitlenmezse
       tarayici img oznitelikleriyle hesap yapip logoyu ezebiliyor. */
    height: 68px;
    width: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    flex-shrink: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    filter: drop-shadow(0 0 10px rgba(201, 31, 31, 0.3));
}

.logo img:hover {
    transform: scale(1.05) rotate(2deg);
    filter: drop-shadow(0 0 20px rgba(201, 31, 31, 0.6));
}

nav {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    min-width: 0;
}

nav ul {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    list-style: none;
    gap: 22px;
}

nav ul li a {
    color: var(--text-light);
    text-decoration: none;
    font-family: 'Oswald', sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    white-space: nowrap;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    padding: 5px 0;
}

nav ul li a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent-red), var(--accent-gold));
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

nav ul li a:hover::after {
    width: 100%;
}

nav ul li a:hover {
    color: var(--accent-red);
    transform: translateY(-2px);
}
.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    z-index: 1001;
}

.hamburger span {
    width: 30px;
    height: 3px;
    background: var(--text-light);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(8px, 8px);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(8px, -8px);
}
.mobile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.8);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 998;
}

.mobile-overlay.active {
    opacity: 1;
    visibility: visible;
}
/* Footer */
footer {
    background: var(--secondary-dark);
    border-top: 2px solid var(--border-gray);
    padding: 60px 20px 30px;
}

.footer-container {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}

.footer-section h4 {
    font-family: 'Oswald', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: var(--accent-gold);
    margin-bottom: 20px;
    text-transform: uppercase;
}

.footer-logo img {
    /* Sola hizali: sutun genisligi sayfadan sayfaya degistigi icin
       ortalamak tutarsiz duruyordu. */
    height: 80px;
    width: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    margin: 0 0 20px;
}

.footer-tagline {
    font-size: 14px;
    color: var(--text-gray);
    line-height: 1.6;
}

.footer-links {
    list-style: none;
}

.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    color: var(--text-gray);
    text-decoration: none;
    font-size: 15px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-block;
}

.footer-links a:hover {
    color: var(--accent-red);
    padding-left: 5px;
}

.footer-bottom {
    text-align: center;
    padding-top: 30px;
    border-top: 1px solid var(--border-gray);
    color: var(--text-gray);
    font-size: 14px;
}


/* Ust menu — dar ekranlarda kademeli daralma */
@media (max-width: 1400px) {
    .header-container { padding: 10px 22px; gap: 14px; }
    nav ul { gap: 16px; }
    nav ul li a { font-size: 13px; letter-spacing: 0.2px; }
    .logo img { height: 60px; }
    header.scrolled .logo img { height: 52px; }
}

@media (max-width: 1240px) {
    nav ul { gap: 12px; }
    nav ul li a { font-size: 12px; }
    .logo img { height: 54px; }
}

@media (max-width: 1180px) {
    nav {
        display: none;
    }

    .hamburger {
        display: flex;
    }
}


@media (max-width: 768px) {
    .footer-container {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------------------------------
   Etkin menu maddesi
   SEO acilis sayfalarinda bulunulan sayfa isaretlenir.
   --------------------------------------------------------------------- */
nav ul li a.aktif {
    color: var(--accent-red);
}

nav ul li a.aktif::after {
    width: 100%;
}
/* ---------------------------------------------------------------------
   Baglanti bicimindeki dil dugmeleri
   'ana' kipinde <button>, 'seo' kipinde <a> kullanilir; ikisi de ayni
   gorunsun diye ortak kurallar.
   --------------------------------------------------------------------- */
a.lang-btn {
    display: inline-block;
    text-decoration: none;
    text-align: center;
}

a.lang-btn:hover {
    border-color: var(--accent-red);
    color: var(--accent-red);
}

/* =====================================================================
   SABIT (STICKY) BUTONLAR
   Sol alt: rezervasyon · Sag alt: WhatsApp
   Masaustu: kompakt hap dugme. Mobil: yazili, alta sabit genis dugme.
   ===================================================================== */
.sabit-cubuk {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 0 26px 26px;
    pointer-events: none;
}

.sabit-btn {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 24px;
    border: none;
    border-radius: 50px;
    font-family: 'Oswald', sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--text-light);
    cursor: pointer;
    transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s cubic-bezier(.4,0,.2,1);
}

.sabit-btn svg { flex-shrink: 0; }

.sabit-rez {
    background: linear-gradient(135deg, var(--accent-red) 0%, #a11717 100%);
    box-shadow: 0 8px 26px rgba(201, 31, 31, .45);
}

.sabit-wa {
    background: linear-gradient(135deg, #25d366 0%, #1da851 100%);
    box-shadow: 0 8px 26px rgba(37, 211, 102, .40);
}

.sabit-btn:hover {
    color: var(--text-light);
    transform: translateY(-3px);
}

.sabit-rez:hover { box-shadow: 0 12px 32px rgba(201, 31, 31, .6); }
.sabit-wa:hover  { box-shadow: 0 12px 32px rgba(37, 211, 102, .55); }

/* =====================================================================
   SERIT BOSLUGU
   Serit sabit (position: fixed) oldugu icin, ana sayfa disindaki
   sayfalarda icerigin altina girmemesi adina bu kadar bosluk birakilir.
   ===================================================================== */
.serit-ara {
    height: 88px;
}

/* =====================================================================
   MOBIL
   ===================================================================== */
@media (max-width: 1180px) {
    /* Dil dugmeleri mobilde de seritte kalsin — hizli erisim icin */
    .header-container { gap: 10px; padding: 8px 14px; }
    .logo img { height: 46px; }
    header.scrolled .logo img { height: 42px; }
    .hamburger { margin-left: 4px; }
    .hamburger span { width: 24px; }

    /* Mobil menudeki dil satiri artik gereksiz */
    .serit-ara { height: 66px; }
}

@media (max-width: 400px) {
    .logo img { height: 40px; }
    .serit-ara { height: 60px; }
}

@media (max-width: 768px) {
    /* Sabit butonlar: yazili ve alta sabit — okunakli olsun */
    .sabit-cubuk {
        padding: 0 10px 10px;
        gap: 10px;
    }

    .sabit-btn {
        flex: 1 1 0;
        padding: 14px 10px;
        font-size: 13px;
        letter-spacing: .4px;
        gap: 8px;
        border-radius: 12px;
        box-shadow: 0 -2px 18px rgba(0, 0, 0, .5);
    }

    .sabit-btn svg { width: 17px; height: 17px; }

    /* Alt bilgi, sabit butonlarin arkasinda kalmasin */
    footer { padding-bottom: 96px; }
}

/* =====================================================================
   CAPA HEDEFLERI
   Serit sabit oldugu icin #about gibi baglantilara tiklandiginda
   basligin serit altinda kalmamasi adina pay birakilir.
   ===================================================================== */
[id] {
    scroll-margin-top: 100px;
}

@media (max-width: 1400px) {
    .serit-ara { height: 80px; }
    [id] { scroll-margin-top: 92px; }
}

@media (max-width: 1180px) {
    [id] { scroll-margin-top: 76px; }
}

@media (max-width: 400px) {
    [id] { scroll-margin-top: 68px; }
}

/* =====================================================================
   DIL SECICI — bayrakli
   Bayraklar gomulu SVG; emoji bayraklar Windows'ta gorunmedigi icin
   tercih edilmedi.
   ===================================================================== */
.lang-switcher {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 6px;
}

.lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 9px 5px 6px;
    background: transparent;
    border: 1px solid var(--border-gray);
    border-radius: 6px;
    color: var(--text-gray);
    cursor: pointer;
    font-family: 'Oswald', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .5px;
    line-height: 1;
    text-decoration: none;
    transition: border-color .2s, color .2s, background .2s;
}

.lang-btn .bayrak {
    width: 20px;
    height: 14px;
    border-radius: 2px;
    display: block;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .16);
}

.lang-btn:hover {
    border-color: var(--accent-red);
    color: var(--text-light);
}

.lang-btn.active {
    background: var(--accent-red);
    border-color: var(--accent-red);
    color: var(--text-light);
}

/* =====================================================================
   MOBIL MENU — ortada acilan pencere
   ===================================================================== */
.mobile-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .78);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .28s cubic-bezier(.4,0,.2,1), visibility .28s;
    z-index: 998;
}

.mobile-overlay.active { opacity: 1; visibility: visible; }

.mobil-pencere {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(.94);
    width: min(340px, 88vw);
    max-height: 78vh;
    overflow-y: auto;
    background: var(--secondary-dark);
    border: 1px solid var(--border-gray);
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .65), 0 0 0 1px rgba(201, 31, 31, .25);
    padding: 18px 22px 24px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .28s cubic-bezier(.4,0,.2,1),
                transform .28s cubic-bezier(.4,0,.2,1),
                visibility .28s;
    z-index: 999;
}

.mobil-pencere.active {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

.mobil-pencere-ust {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 14px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--border-gray);
}

.mobil-pencere-ust img {
    height: 44px;
    width: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
}

.mobil-kapat {
    background: transparent;
    border: 1px solid var(--border-gray);
    color: var(--text-light);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background .2s, transform .2s, border-color .2s;
}

.mobil-kapat:hover {
    background: var(--accent-red);
    border-color: var(--accent-red);
    transform: rotate(90deg);
}

.mobile-nav-list { list-style: none; padding: 0; margin: 0; }

.mobile-nav-list li + li { border-top: 1px solid rgba(255, 255, 255, .06); }

.mobile-nav-list a {
    display: block;
    padding: 13px 4px;
    color: var(--text-light);
    text-decoration: none;
    font-family: 'Oswald', sans-serif;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: .6px;
    text-transform: uppercase;
    transition: color .2s, padding-left .2s;
}

.mobile-nav-list a:hover,
.mobile-nav-list a.aktif {
    color: var(--accent-red);
    padding-left: 10px;
}

/* =====================================================================
   MOBIL SERIT — dil butonlari logo ile hamburger arasinda, ortali
   ===================================================================== */
@media (max-width: 1180px) {
    .lang-switcher {
        display: flex;
        margin: 0 auto;          /* logo ile hamburger arasinda ortalanir */
        gap: 5px;
    }

    .lang-btn {
        padding: 6px;
        gap: 0;
        border-radius: 5px;
    }

    .lang-btn span { display: none; }   /* mobilde yalnizca bayrak */

    .lang-btn .bayrak { width: 26px; height: 18px; }
}

@media (max-width: 420px) {
    .lang-switcher { gap: 3px; }
    .lang-btn { padding: 4px; }
    .lang-btn .bayrak { width: 23px; height: 16px; }
}

/* =====================================================================
   LOGO — buyutuldu + simsek animasyonu
   Marka Zeus temali oldugu icin logo belirli araliklarla simsek cakiyor:
   once kisa bir parlama, ardindan hafif sarsinti. Tamami CSS ile
   yapiliyor; ek istek yok, ana is parcacigini mesgul etmiyor.
   ===================================================================== */
.logo-baglanti {
    position: relative;
    display: inline-block;
    line-height: 0;
}

.logo img {
    height: 84px;
    width: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    animation: logo-sarsinti 9s ease-in-out infinite;
    will-change: filter, transform;
}

header.scrolled .logo img { height: 68px; }

/* Simsek katmani — logonun uzerine biner */
.logo-simsek {
    position: absolute;
    top: -14%;
    left: -22%;
    width: 144%;
    height: 128%;
    pointer-events: none;
    opacity: 0;
    animation: logo-cakis 9s ease-in-out infinite;
}

.logo-simsek svg {
    width: 100%;
    height: 100%;
    display: block;
    filter: drop-shadow(0 0 6px rgba(255, 217, 104, .95))
            drop-shadow(0 0 14px rgba(201, 31, 31, .7));
}

.simsek-sag { animation: simsek-ikinci 9s ease-in-out infinite; }

/* Parlama + hafif sarsinti */
@keyframes logo-sarsinti {
    0%, 76%, 100% {
        transform: none;
        filter: drop-shadow(0 0 10px rgba(201, 31, 31, .3));
    }
    77% {
        transform: translate(-2px, 1px) rotate(-2deg) scale(1.05);
        filter: brightness(2.1) drop-shadow(0 0 22px rgba(255, 240, 190, .95));
    }
    79% {
        transform: translate(2px, -1px) rotate(1.6deg) scale(1.03);
        filter: brightness(1.15) drop-shadow(0 0 12px rgba(201, 31, 31, .5));
    }
    81% {
        transform: translate(-1px, 0) rotate(-.8deg) scale(1.04);
        filter: brightness(1.9) drop-shadow(0 0 18px rgba(255, 217, 104, .9));
    }
    84% {
        transform: none;
        filter: drop-shadow(0 0 10px rgba(201, 31, 31, .3));
    }
}

/* Simsek kollarinin gorunurlugu — parlamayla ayni ana denk gelir */
@keyframes logo-cakis {
    0%, 76%, 100% { opacity: 0; }
    77%           { opacity: 1; }
    78.5%         { opacity: 0; }
    80.5%         { opacity: .85; }
    82%           { opacity: 0; }
    83%           { opacity: .5; }
    84%           { opacity: 0; }
}

/* Ikinci kol biraz gecikmeli cakar, tek anda iki yerden vurmus gibi */
@keyframes simsek-ikinci {
    0%, 77.5%, 100% { opacity: 0; transform: scaleY(.85); }
    78.5%           { opacity: 1; transform: scaleY(1); }
    80%             { opacity: 0; transform: scaleY(.9); }
    81.5%           { opacity: .8; transform: scaleY(1); }
    83%             { opacity: 0; transform: scaleY(.85); }
}

/* =====================================================================
   BUYUYEN LOGOYA GORE SERIT YUKSEKLIKLERI
   ===================================================================== */
.serit-ara { height: 104px; }
[id] { scroll-margin-top: 116px; }

@media (max-width: 1400px) {
    .logo img { height: 74px; }
    header.scrolled .logo img { height: 62px; }
    .serit-ara { height: 94px; }
    [id] { scroll-margin-top: 106px; }
}

@media (max-width: 1240px) {
    .logo img { height: 68px; }
    .serit-ara { height: 88px; }
    [id] { scroll-margin-top: 100px; }
}

@media (max-width: 1180px) {
    .logo img { height: 62px; }
    header.scrolled .logo img { height: 56px; }
    .serit-ara { height: 78px; }
    [id] { scroll-margin-top: 90px; }
}

@media (max-width: 420px) {
    .logo img { height: 54px; }
    header.scrolled .logo img { height: 50px; }
    .serit-ara { height: 70px; }
    [id] { scroll-margin-top: 82px; }
}

/* Hareket azaltma tercihine saygi */
@media (prefers-reduced-motion: reduce) {
    .logo img,
    .logo-simsek,
    .simsek-sag {
        animation: none;
    }
    .logo-simsek { opacity: 0; }
}

/* =====================================================================
   SERIT GENISLIK DENGESI
   Logo buyudugu icin dil dugmeleri kademeli olarak daraltilir.
   ===================================================================== */
@media (max-width: 1400px) {
    /* Dar ekranda yalnizca bayrak — yazi yer kapliyordu */
    .lang-btn span { display: none; }
    .lang-btn { padding: 6px; gap: 0; }
    .lang-btn .bayrak { width: 22px; height: 15px; }
    .lang-switcher { gap: 5px; }
}

@media (max-width: 1180px) {
    .lang-btn { padding: 5px; }
    .lang-btn .bayrak { width: 24px; height: 17px; }
    .lang-switcher { gap: 4px; }
    .header-container { gap: 8px; padding: 8px 12px; }
    .hamburger span { width: 22px; }
}

@media (max-width: 420px) {
    .lang-btn { padding: 4px; }
    .lang-btn .bayrak { width: 22px; height: 15px; }
    .lang-switcher { gap: 3px; }
    .header-container { padding: 8px 10px; }
}

/* =====================================================================
   ONYUKLEYICI
   Logo + simsek, ardindan perde yukari kalkar.

   GUVENLIK: asagidaki "oy-emniyet" animasyonu 2.4 saniyede perdeyi
   kendiliginden kaldirir. JavaScript hic calismasa bile ziyaretci
   icerige ulasir.
   ===================================================================== */
.onyukleyici {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 50% 42%, rgba(201, 31, 31, .18) 0%, transparent 58%),
        var(--primary-dark);
    animation: oy-emniyet .5s ease-in 2.4s forwards;
}

.onyukleyici.gizli {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-6%);
    transition: opacity .5s cubic-bezier(.4,0,.2,1),
                transform .5s cubic-bezier(.4,0,.2,1),
                visibility .5s;
}

/* JS calismazsa perde yine de kalkar */
@keyframes oy-emniyet {
    to { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* Sayfa gecisinde geri gelirken */
.onyukleyici.cikis {
    animation: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .25s ease, transform .25s ease;
}

.oy-govde {
    text-align: center;
    animation: oy-belir .6s cubic-bezier(.4,0,.2,1) both;
}

@keyframes oy-belir {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

/* --- Logo --- */
.oy-logo {
    position: relative;
    display: inline-block;
    line-height: 0;
}

.oy-logo img {
    height: 120px;
    width: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    animation: oy-nabiz 1.6s ease-in-out infinite;
}

.oy-simsek {
    position: absolute;
    top: -16%;
    left: -26%;
    width: 152%;
    height: 132%;
    pointer-events: none;
    opacity: 0;
    animation: oy-cakis 1.6s ease-in-out infinite;
}

.oy-simsek svg {
    width: 100%;
    height: 100%;
    display: block;
    filter: drop-shadow(0 0 8px rgba(255, 217, 104, .95))
            drop-shadow(0 0 18px rgba(201, 31, 31, .75));
}

.oy-kol-sag { animation: oy-ikinci 1.6s ease-in-out infinite; }

@keyframes oy-nabiz {
    0%, 55%, 100% {
        transform: none;
        filter: drop-shadow(0 0 12px rgba(201, 31, 31, .35));
    }
    58% {
        transform: translate(-2px, 1px) rotate(-2deg) scale(1.06);
        filter: brightness(2.2) drop-shadow(0 0 26px rgba(255, 244, 205, .95));
    }
    66% {
        transform: translate(2px, -1px) rotate(1.4deg) scale(1.03);
        filter: brightness(1.2) drop-shadow(0 0 14px rgba(201, 31, 31, .5));
    }
    74% {
        transform: none;
        filter: drop-shadow(0 0 12px rgba(201, 31, 31, .35));
    }
}

@keyframes oy-cakis {
    0%, 55%, 100% { opacity: 0; }
    58%           { opacity: 1; }
    62%           { opacity: 0; }
    68%           { opacity: .75; }
    72%           { opacity: 0; }
}

@keyframes oy-ikinci {
    0%, 59%, 100% { opacity: 0; }
    62%           { opacity: 1; }
    66%           { opacity: 0; }
    70%           { opacity: .7; }
    73%           { opacity: 0; }
}

/* --- Marka yazisi --- */
.oy-marka {
    margin-top: 22px;
    font-family: 'Oswald', sans-serif;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 7px;
    text-transform: uppercase;
    background: linear-gradient(135deg, var(--text-light) 0%, var(--accent-gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--accent-gold);
}

/* --- Ilerleme cizgisi --- */
.oy-cizgi {
    width: 170px;
    height: 2px;
    margin: 20px auto 0;
    background: rgba(255, 255, 255, .12);
    border-radius: 2px;
    overflow: hidden;
}

.oy-cizgi span {
    display: block;
    height: 100%;
    width: 40%;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-red), var(--accent-gold), transparent);
    animation: oy-kayar 1.25s ease-in-out infinite;
}

@keyframes oy-kayar {
    0%   { transform: translateX(-110%); }
    100% { transform: translateX(320%); }
}

@media (max-width: 640px) {
    .oy-logo img { height: 92px; }
    .oy-marka { font-size: 16px; letter-spacing: 5px; margin-top: 18px; }
    .oy-cizgi { width: 140px; }
}

/* Hareket azaltma tercihi: animasyon yok, perde hemen kalkar */
@media (prefers-reduced-motion: reduce) {
    .onyukleyici { animation: oy-emniyet .2s ease-in .3s forwards; }
    .oy-logo img, .oy-simsek, .oy-kol-sag, .oy-cizgi span, .oy-govde { animation: none; }
    .oy-simsek { opacity: 0; }
}

/* =====================================================================
   KATMAN DUZENI (z-index)
   Tek yerden yonetilir; boylece hangi ogenin kimin uzerinde oldugu
   tahmin isi olmaktan cikar.

     400   simsek tuvali (dekoratif, tiklanamaz)
     500   ust serit
     600   sabit butonlar
    1000   mobil menu perdesi
    1010   mobil menu penceresi
   10000   sube secim penceresi (ana sayfa)
   99999   onyukleyici
   ===================================================================== */
header {
    z-index: 500;
}

.hamburger {
    z-index: 2;   /* serit kendi katmani icinde yeterli */
}

.sabit-cubuk {
    z-index: 600;
}

.mobile-overlay {
    z-index: 1000;
}

.mobil-pencere {
    z-index: 1010;
}

/* Mobil menu acikken serit uzerine binmesin */
.mobile-overlay.active ~ header,
body:has(.mobil-pencere.active) header {
    z-index: 400;
}

/* =====================================================================
   ACILIR MENU (Studios)
   Masaustunde ustune gelince acilir, mobilde dokununca genisler.
   ===================================================================== */
.menu-ok {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 6px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    vertical-align: middle;
    transition: transform .2s;
}

/* --- Masaustu --- */
.menu-alt { position: relative; }

.menu-acilir {
    /* nav ul flex duzenindeydi; acilir menu dikey liste olmali. */
    display: block;
    flex-wrap: initial;
    gap: 0;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 262px;
    padding: 8px;
    margin-top: 14px;
    list-style: none;
    background: var(--secondary-dark);
    border: 1px solid var(--border-gray);
    border-radius: 12px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .6);
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s cubic-bezier(.4,0,.2,1),
                transform .22s cubic-bezier(.4,0,.2,1),
                visibility .22s;
    z-index: 20;
}

/* Baglanti kopmasin diye ust bosluga gorunmez kopru */
.menu-acilir::before {
    content: '';
    position: absolute;
    top: -16px;
    left: 0;
    right: 0;
    height: 16px;
}

/* Yalnizca DOGRUDAN cocugu ac — torun secici kullanilirsa
   tum kademeler ayni anda acilip ust uste biniyor. */
.menu-alt:hover > .menu-acilir,
.menu-alt:focus-within > .menu-acilir {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.menu-alt:hover > a .menu-ok { transform: rotate(180deg); }

.menu-acilir li { border: 0; }

.menu-acilir a {
    display: block;
    padding: 10px 14px;
    border-radius: 8px;
    border: 0;
    color: var(--text-light);
    text-transform: none;
    letter-spacing: 0;
    transition: background .18s, color .18s;
}

.menu-acilir a:hover { background: rgba(201, 31, 31, .16); color: var(--accent-red); }

.menu-acilir a::after { display: none; }

.menu-acilir-ad {
    display: block;
    font-family: 'Oswald', sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .4px;
    white-space: nowrap;
}

.menu-acilir-alt {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 11.5px;
    color: var(--text-gray);
    margin-top: 2px;
    white-space: nowrap;
}

.menu-ayrac {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--border-gray) !important;
}

/* --- Mobil pencere icinde --- */
.mobil-alt-ac {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 4px;
    background: none;
    border: 0;
    color: var(--text-light);
    font-family: 'Oswald', sans-serif;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: .6px;
    text-transform: uppercase;
    cursor: pointer;
}

.mobil-alt-ac:hover { color: var(--accent-red); }

.mobil-alt-liste {
    list-style: none;
    max-height: 0;
    overflow: hidden;
    padding: 0;
    transition: max-height .3s cubic-bezier(.4,0,.2,1);
}

.mobil-alt.acik .mobil-alt-liste { max-height: 520px; }

.mobil-alt.acik .mobil-alt-ac .menu-ok { transform: rotate(180deg); }

.mobil-alt-liste li { border: 0 !important; }

.mobil-alt-liste a {
    padding: 10px 4px 10px 18px;
    font-size: 14px;
    letter-spacing: .3px;
    color: var(--text-gray);
    text-transform: none;
    border-left: 2px solid var(--border-gray);
    margin-left: 4px;
}

.mobil-alt-liste a:hover {
    color: var(--accent-red);
    border-left-color: var(--accent-red);
    padding-left: 22px;
}

/* =====================================================================
   ACILIR MENU — ic ice kademeler (ulke > sehir > studyo)
   ===================================================================== */
.menu-ok-sag {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 10px;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 5px solid currentColor;
    vertical-align: middle;
    opacity: .7;
}

/* Ikinci ve sonraki kademeler yana acilir */
.menu-alt-ic { position: relative; }

.menu-alt-ic > .menu-acilir {
    top: -8px;
    left: 100%;
    transform: translateX(8px);
    margin-top: 0;
}

.menu-alt-ic:hover > .menu-acilir,
.menu-alt-ic:focus-within > .menu-acilir {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

/* Yan acilan kademede ust kopru yerine sol kopru */
.menu-alt-ic > .menu-acilir::before {
    top: 0;
    bottom: 0;
    left: -10px;
    right: auto;
    width: 10px;
    height: auto;
}

/* Ekranin sagina tasarsa sola acilsin */
@media (max-width: 1500px) {
    .menu-alt-ic > .menu-acilir {
        left: auto;
        right: 100%;
        transform: translateX(-8px);
    }
    .menu-alt-ic:hover > .menu-acilir,
    .menu-alt-ic:focus-within > .menu-acilir { transform: translateX(0); }
    .menu-alt-ic > .menu-acilir::before { left: auto; right: -10px; }
}

.menu-alt-ic > a { display: flex; align-items: center; justify-content: space-between; }

/* --- Mobil: ic ice acilir --- */
.mobil-derinlik-1 > li > a,
.mobil-derinlik-1 > li > .mobil-alt-ac { padding-left: 18px; }

.mobil-derinlik-2 > li > a { padding-left: 32px; font-size: 13.5px; }

.mobil-alt-liste .mobil-alt-ac {
    font-size: 14px;
    letter-spacing: .3px;
    color: var(--text-gray);
    text-transform: none;
    border-left: 2px solid var(--border-gray);
    margin-left: 4px;
    padding-right: 10px;
}

.mobil-alt-liste .mobil-alt-ac:hover { color: var(--accent-red); border-left-color: var(--accent-red); }

.mobil-alt-liste .mobil-alt.acik > .mobil-alt-ac { color: var(--accent-gold); }

/* =====================================================================
   ACILIR MENU — yerlesim duzeltmeleri
   nav ul yatay flex oldugu icin acilir listeler de yatay diziliyordu.
   ===================================================================== */
.menu-acilir,
.menu-acilir ul {
    display: block;
    flex-wrap: initial;
    gap: 0;
    margin: 0;
    padding: 8px;
    list-style: none;
}

.menu-acilir li {
    display: block;
    width: 100%;
    white-space: nowrap;
}

/* Ic kademeler yalnizca kendi ust ogesi uzerine gelince acilir */
.menu-acilir .menu-acilir {
    opacity: 0;
    visibility: hidden;
}

.menu-alt-ic:hover > .menu-acilir,
.menu-alt-ic:focus-within > .menu-acilir {
    opacity: 1;
    visibility: visible;
}

/* =====================================================================
   SUBE PENCERESI (bolge > sehir > studyo > detay)
   Once index.php icinde gomuluydu; her sayfada kullanilabilsin diye
   ortak dosyaya tasindi. Isaretleme: parca-modal.php
   ===================================================================== */
/* Bolge > studyo listesi basligi */
.branch-liste-baslik {
    font-family: 'Oswald', sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: var(--accent-gold);
    margin-bottom: 24px;
    letter-spacing: 1px;
}

/* Henuz acilmamis studyo karti — tiklanamaz */
.branch-card-yakinda {
    cursor: default;
    opacity: .62;
    border-style: dashed;
}

.branch-card-yakinda:hover {
    transform: none;
    border-color: var(--border-gray);
    box-shadow: none;
}

.branch-card-yakinda .branch-card-icon { color: var(--accent-gold); }

/* Gizlenen goruntuler */
.branch-selection-view.hidden { display: none; }

/* Branch Modal Styles */
.branch-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 10000;
    overflow-y: auto;
    padding: 20px;
    animation: fadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.branch-modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.branch-modal-content {
    background: var(--secondary-dark);
    border-radius: 20px;
    max-width: 1200px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    border: 2px solid var(--accent-red);
    box-shadow: 0 20px 60px rgba(201, 31, 31, 0.5);
    animation: slideInFromBottom 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.branch-modal-header {
    padding: 30px;
    border-bottom: 2px solid var(--border-gray);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, rgba(201, 31, 31, 0.2) 0%, transparent 100%);
}

.branch-modal-header h2 {
    font-family: 'Oswald', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.branch-modal-close {
    background: transparent;
    border: none;
    color: var(--text-light);
    font-size: 32px;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.branch-modal-close:hover {
    background: var(--accent-red);
    transform: rotate(90deg);
}

.branch-modal-body {
    padding: 40px 30px;
}

.branch-selection-view {
    display: block;
}

.branch-detail-view {
    display: none;
}

.branch-detail-view.active {
    display: block;
}

.branch-selection-view.hidden {
    display: none;
}

.branch-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
}

.branch-card {
    background: var(--primary-dark);
    border: 2px solid var(--border-gray);
    border-radius: 15px;
    padding: 30px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.branch-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(201, 31, 31, 0.2), transparent);
    transition: left 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.branch-card:hover::before {
    left: 100%;
}

.branch-card:hover {
    border-color: var(--accent-red);
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(201, 31, 31, 0.4);
}

.branch-card-icon {
    font-size: 48px;
    color: var(--accent-red);
    margin-bottom: 20px;
    display: block;
}

.branch-card-title {
    font-family: 'Oswald', sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: var(--text-light);
    margin-bottom: 10px;
}

.branch-card-subtitle {
    font-size: 14px;
    color: var(--text-gray);
    margin-bottom: 15px;
}

.branch-card-location {
    font-size: 13px;
    color: var(--accent-gold);
    display: flex;
    align-items: center;
    gap: 8px;
}

.branch-detail-header {
    text-align: center;
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 2px solid var(--border-gray);
}

.branch-detail-header h3 {
    font-family: 'Oswald', sans-serif;
    font-size: 36px;
    font-weight: 700;
    color: var(--accent-gold);
    margin-bottom: 10px;
}

.branch-detail-header p {
    font-size: 16px;
    color: var(--text-gray);
}

.branch-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.branch-detail-item {
    background: rgba(201, 31, 31, 0.1);
    padding: 25px;
    border-radius: 15px;
    border: 2px solid var(--border-gray);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.branch-detail-item:hover {
    border-color: var(--accent-red);
    transform: translateY(-3px);
}

.branch-detail-item i {
    font-size: 32px;
    color: var(--accent-red);
    margin-bottom: 15px;
    display: block;
}

.branch-detail-item h4 {
    font-family: 'Oswald', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-light);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.branch-detail-item a {
    color: var(--text-light);
    text-decoration: none;
    font-size: 15px;
    word-break: break-word;
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.branch-detail-item a:hover {
    color: var(--accent-red);
}

.branch-back-btn {
    background: transparent;
    border: 2px solid var(--accent-red);
    color: var(--accent-red);
    padding: 12px 30px;
    border-radius: 50px;
    font-family: 'Oswald', sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.branch-back-btn:hover {
    background: var(--accent-red);
    color: var(--text-light);
    transform: translateX(-5px);
}