/* ==========================================================================
   Makam Stüdyo — ortak biçem
   Tek dosya, dışarıdan hiçbir kaynak çekilmiyor (yazı tipi, simge, izleyici yok).
   ========================================================================== */

:root {
    --zemin:   #061014;
    --zemin-2: #0B1D21;
    --zemin-3: #12292E;
    --cam:     rgba(255,255,255,.035);
    --cizgi:   rgba(224,184,114,.14);
    --cizgi-2: rgba(224,184,114,.30);
    --metin:   #F2F7F6;
    --ikincil: #A9BDBB;
    --soluk:   #74908E;
    --altin:   #E0B872;
    --altin-2: #C1913F;
    --altin-3: #F7E7C4;
    --zumrut:  #47C39A;
    --zumrut-2:#1E6B55;
    --olcu:    1160px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; }

body {
    background:
        radial-gradient(1200px 700px at 78% -8%,  rgba(224,184,114,.10), transparent 62%),
        radial-gradient(1000px 800px at -12% 32%, rgba(71,195,154,.075), transparent 60%),
        radial-gradient(900px 700px at 110% 82%,  rgba(224,184,114,.06), transparent 58%),
        linear-gradient(180deg, #061014 0%, #08181C 42%, #061014 100%);
    background-attachment: fixed;
    color: var(--metin);
    font: 16px/1.7 system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a { color: var(--altin); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
img { max-width: 100%; }
:focus-visible { outline: 2px solid var(--altin); outline-offset: 3px; border-radius: 6px; }

.kap { max-width: var(--olcu); margin: 0 auto; padding: 0 28px; position: relative; z-index: 1; width: 100%; }
.dar { max-width: 780px; }

.atla {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    background: var(--altin); color: #0A1614; padding: 12px 20px;
    border-radius: 0 0 10px 0; font-weight: 700;
}
.atla:focus { left: 0; }

/* ==========================================================================
   Zemin — geometrik doku + ışık
   ========================================================================== */
.fon { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.doku {
    position: absolute; inset: -10%; opacity: .05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='108' height='108' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23E0B872' stroke-width='0.8'%3E%3Cpath d='M60 6 76 26 100 22 96 46 118 60 96 74 100 98 76 94 60 114 44 94 20 98 24 74 2 60 24 46 20 22 44 26Z'/%3E%3Cpath d='M60 30 82 38 90 60 82 82 60 90 38 82 30 60 38 38Z'/%3E%3Ccircle cx='60' cy='60' r='10'/%3E%3C/g%3E%3C/svg%3E");
    animation: kaydir 90s linear infinite;
}
@keyframes kaydir { to { transform: translate(108px, 108px); } }

/* ==========================================================================
   Üst çubuk
   ========================================================================== */
header {
    position: sticky; top: 0; z-index: 40; padding: 13px 0;
    background: rgba(6,16,20,.66);
    backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%);
    border-bottom: 1px solid transparent; transition: border-color .25s ease, background .25s ease;
}
header.kaydi { border-bottom-color: var(--cizgi); background: rgba(6,16,20,.88); }
header .kap { display: flex; align-items: center; justify-content: space-between; gap: 20px; }

.marka { display: inline-flex; align-items: center; gap: 13px; color: var(--metin); }
.marka:hover { text-decoration: none; }
.marka img { width: 44px; height: 44px; display: block; filter: drop-shadow(0 3px 12px rgba(224,184,114,.28)); }
.marka b { font-size: 17px; font-weight: 700; letter-spacing: -.02em; display: block; line-height: 1.2; }
.marka small { font-size: 10.5px; font-weight: 600; color: var(--altin-2); letter-spacing: .16em; text-transform: uppercase; }

.ust-bag { display: flex; gap: 4px; font-size: 14.5px; align-items: center; }
.ust-bag a { color: var(--ikincil); padding: 9px 15px; border-radius: 999px; transition: color .18s, background .18s; }
.ust-bag a:hover { color: var(--metin); background: rgba(255,255,255,.05); text-decoration: none; }
.ust-bag a[aria-current="page"] { color: var(--altin-3); background: rgba(224,184,114,.10); box-shadow: inset 0 0 0 1px var(--cizgi); }

.menu-dugme {
    display: none; background: none; border: 1px solid var(--cizgi-2); color: var(--metin);
    width: 44px; height: 44px; border-radius: 12px; cursor: pointer; align-items: center; justify-content: center;
}
.menu-dugme svg { width: 20px; height: 20px; }

@media (max-width: 860px) {
    .menu-dugme { display: inline-flex; }
    .ust-bag {
        position: absolute; top: 100%; left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: 0;
        background: rgba(7,20,24,.985);
        backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
        border-bottom: 1px solid var(--cizgi);
        padding: 10px 28px 20px; display: none;
    }
    .ust-bag.acik { display: flex; }
    .ust-bag a { padding: 14px 12px; border-radius: 10px; font-size: 15.5px; }
}

/* ==========================================================================
   Bölüm iskeleti
   ========================================================================== */
main { flex: 1 0 auto; }
section { padding: 62px 0; position: relative; }
section.sik { padding: 42px 0; }

/* Bölüm başlığı: sol metin + sağda süsleme, boş alan kalmasın */
.bolum-basi { margin-bottom: 38px; }
/* Sağında süsleme olan başlıklar iki sütuna ayrılır; ötekiler akışta kalır */
.bolum-basi.suslu { display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: end; }
.bolum-basi > div:first-child { min-width: 0; }
.bolum-basi h2 + p, .bolum-basi p { max-width: 46em; }
.bolum-etiket {
    font-size: 11px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase;
    color: var(--altin); margin-bottom: 14px; display: flex; align-items: center; gap: 10px;
}
.bolum-etiket::before { content: ''; width: 26px; height: 1px; background: linear-gradient(90deg, transparent, var(--altin)); }
.bolum-basi h2 { font-size: clamp(28px, 4vw, 41px); letter-spacing: -.035em; line-height: 1.14; font-weight: 800; }
.bolum-basi p { color: var(--ikincil); margin-top: 15px; font-size: 16.5px; line-height: 1.78; }
.bolum-susu { opacity: .5; flex: none; }
.bolum-susu svg { width: 82px; height: 82px; stroke: var(--altin); fill: none; }
@media (max-width: 820px) { .bolum-basi.suslu { grid-template-columns: 1fr; } .bolum-susu { display: none; } }

h1 {
    font-size: clamp(38px, 6.4vw, 68px); line-height: 1.04; letter-spacing: -.045em; font-weight: 800;
    background: linear-gradient(168deg, #FFFFFF 0%, #DCE9E7 42%, #93AEAB 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
h1 .altin, .altin-yazi {
    background: linear-gradient(118deg, var(--altin-3), var(--altin) 42%, var(--altin-2));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Süsleme şeridi — bölümleri ayırır */
.ayirac { height: 40px; display: flex; align-items: center; justify-content: center; gap: 16px; opacity: .55; }
.ayirac span { height: 1px; flex: 1; max-width: 240px; background: linear-gradient(90deg, transparent, var(--cizgi-2)); }
.ayirac span:last-child { background: linear-gradient(90deg, var(--cizgi-2), transparent); }
.ayirac svg { width: 30px; height: 30px; stroke: var(--altin); fill: none; stroke-width: 1; flex: none; }

/* ==========================================================================
   Ortak öğeler
   ========================================================================== */
.rozet {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 8px 17px 8px 13px; border-radius: 999px;
    background: linear-gradient(180deg, rgba(224,184,114,.14), rgba(224,184,114,.06));
    border: 1px solid var(--cizgi-2);
    font-size: 12.5px; font-weight: 650; letter-spacing: .015em; color: var(--altin-3);
    box-shadow: 0 4px 20px rgba(224,184,114,.10);
}
.rozet i { width: 7px; height: 7px; border-radius: 50%; background: var(--altin); animation: nabiz 2.4s ease-in-out infinite; }
@keyframes nabiz {
    0%,100% { opacity: 1;   box-shadow: 0 0 0 0 rgba(224,184,114,.55); }
    70%     { opacity: .55; box-shadow: 0 0 0 9px rgba(224,184,114,0); }
}

.dugme {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 15px 30px; border-radius: 999px; font-weight: 680; font-size: 15px;
    transition: transform .18s ease, filter .18s ease, background .18s ease, box-shadow .18s ease;
}
.dugme:hover { text-decoration: none; }
.dugme.birincil {
    background: linear-gradient(180deg, var(--altin-3) 0%, var(--altin) 52%, var(--altin-2) 100%);
    color: #14231F; box-shadow: 0 10px 34px rgba(224,184,114,.26), inset 0 1px 0 rgba(255,255,255,.5);
}
.dugme.birincil:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 14px 42px rgba(224,184,114,.34); }
.dugme.ikincil { border: 1px solid var(--cizgi-2); color: var(--metin); background: rgba(255,255,255,.02); }
.dugme.ikincil:hover { background: rgba(224,184,114,.09); transform: translateY(-2px); }
.eylemler { display: flex; gap: 13px; flex-wrap: wrap; margin-top: 34px; }

/* ==========================================================================
   Bento ızgara — değişken boyutlu döşemeler
   ========================================================================== */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.dosem {
    grid-column: span 2; position: relative; overflow: hidden;
    background: linear-gradient(158deg, rgba(18,41,46,.86) 0%, rgba(9,24,28,.86) 100%);
    border: 1px solid var(--cizgi); border-radius: 22px; padding: 28px;
    transition: border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}
.dosem:hover { border-color: var(--cizgi-2); transform: translateY(-3px); box-shadow: 0 20px 50px rgba(0,0,0,.42); }
.dosem.genis { grid-column: span 3; }
.dosem.tam   { grid-column: span 6; }
.dosem h3 { font-size: 18px; font-weight: 700; letter-spacing: -.022em; margin-bottom: 9px; }
.dosem p { color: var(--ikincil); font-size: 14.8px; line-height: 1.74; }
@media (max-width: 900px) { .bento { grid-template-columns: repeat(2, 1fr); } .dosem, .dosem.genis, .dosem.tam { grid-column: span 2; } }

/* Büyük gösterge simgesi */
.nisan {
    width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 18px;
    background: linear-gradient(160deg, rgba(224,184,114,.22), rgba(224,184,114,.06));
    border: 1px solid var(--cizgi-2);
    box-shadow: 0 8px 24px rgba(224,184,114,.14), inset 0 1px 0 rgba(255,255,255,.10);
}
.nisan svg { width: 25px; height: 25px; stroke: var(--altin-3); fill: none; stroke-width: 1.7; }
.nisan.yesil { background: linear-gradient(160deg, rgba(71,195,154,.22), rgba(71,195,154,.05)); border-color: rgba(71,195,154,.30); box-shadow: 0 8px 24px rgba(71,195,154,.14); }
.nisan.yesil svg { stroke: var(--zumrut); }

/* ==========================================================================
   Ses dalgası (canlı görünüm)
   ========================================================================== */
.dalga { display: flex; align-items: center; gap: 3px; height: 62px; margin-top: 20px; }
.dalga i {
    flex: 1; border-radius: 2px; min-width: 2px;
    background: linear-gradient(180deg, var(--altin-3), var(--altin-2));
    animation: cirp 1.5s ease-in-out infinite;
    animation-delay: calc(var(--g) * -95ms);
    opacity: .9;
}
@keyframes cirp { 0%,100% { height: 16%; } 50% { height: 100%; } }

/* Radyo diski */
.disk { position: relative; width: 132px; height: 132px; margin: 6px auto 20px; }
.disk .halka { position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--cizgi-2); }
.disk .halka:nth-child(2) { inset: 15px; opacity: .7; }
.disk .halka:nth-child(3) { inset: 30px; opacity: .5; }
.disk .goz {
    position: absolute; inset: 45px; border-radius: 50%;
    background: linear-gradient(160deg, var(--altin-3), var(--altin-2));
    box-shadow: 0 0 30px rgba(224,184,114,.45);
}
.disk .yayilim {
    position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--altin);
    animation: yayil 2.8s ease-out infinite;
}
.disk .yayilim.g2 { animation-delay: -1.4s; }
@keyframes yayil { 0% { transform: scale(.34); opacity: .85; } 100% { transform: scale(1.06); opacity: 0; } }

.canli-etiket {
    display: inline-flex; align-items: center; gap: 8px; padding: 5px 13px; border-radius: 999px;
    background: rgba(71,195,154,.13); border: 1px solid rgba(71,195,154,.32);
    color: var(--zumrut); font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
}
.canli-etiket i { width: 6px; height: 6px; border-radius: 50%; background: var(--zumrut); animation: nabiz 1.8s ease-in-out infinite; }

/* Sayaç halkası (Zikir) */
.sayac-halka { position: relative; width: 130px; height: 130px; margin: 4px auto 18px; }
.sayac-halka svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.sayac-halka .rakam {
    position: absolute; inset: 0; display: grid; place-items: center;
    font-size: 30px; font-weight: 800; letter-spacing: -.03em; color: var(--altin-3);
}

/* ==========================================================================
   Ölçü şeridi
   ========================================================================== */
.serit {
    display: grid; grid-template-columns: repeat(4, 1fr);
    border: 1px solid var(--cizgi); border-radius: 22px; overflow: hidden;
    background: linear-gradient(160deg, rgba(18,41,46,.7), rgba(8,22,26,.7));
    backdrop-filter: blur(6px);
}
.serit > div { padding: 26px 24px; border-right: 1px solid var(--cizgi); }
.serit > div:last-child { border-right: none; }
.serit b {
    display: block; font-size: 25px; font-weight: 800; letter-spacing: -.035em; line-height: 1.2;
    background: linear-gradient(118deg, var(--altin-3), var(--altin) 45%, var(--altin-2));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.serit span { display: block; margin-top: 8px; font-size: 13.5px; color: var(--ikincil); line-height: 1.62; }
@media (max-width: 880px) {
    .serit { grid-template-columns: repeat(2, 1fr); }
    .serit > div:nth-child(2n) { border-right: none; }
    .serit > div:nth-child(-n+2) { border-bottom: 1px solid var(--cizgi); }
}
@media (max-width: 460px) {
    .serit { grid-template-columns: 1fr; }
    .serit > div { border-right: none; border-bottom: 1px solid var(--cizgi); }
    .serit > div:last-child { border-bottom: none; }
}

/* ==========================================================================
   Uygulama kartı — görsel + metin
   ========================================================================== */
.uyg-kart {
    display: grid; grid-template-columns: 260px 1fr; gap: 34px; align-items: center;
    position: relative; overflow: hidden;
    background: linear-gradient(150deg, rgba(20,45,50,.88) 0%, rgba(8,22,26,.9) 100%);
    border: 1px solid var(--cizgi); border-radius: 26px; padding: 34px;
    transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.uyg-kart:hover { border-color: var(--cizgi-2); transform: translateY(-3px); box-shadow: 0 26px 60px rgba(0,0,0,.45); }
.uyg-kart::before { content:''; position:absolute; inset:0 0 auto 0; height:2px; background: linear-gradient(90deg, var(--altin), rgba(71,195,154,.5) 45%, transparent 78%); }
.uyg-kart + .uyg-kart { margin-top: 20px; }
@media (max-width: 800px) { .uyg-kart { grid-template-columns: 1fr; gap: 26px; padding: 26px; } }

.uyg-basi { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; }
.uyg-basi img { width: 56px; height: 56px; border-radius: 16px; box-shadow: 0 8px 22px rgba(0,0,0,.5); }
.uyg-basi h3 { font-size: 23px; font-weight: 750; letter-spacing: -.028em; }
.uyg-kart > div:last-child > p { color: var(--ikincil); font-size: 15.2px; line-height: 1.76; }

.durum { display: inline-block; margin-top: 6px; font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; }
.durum.yakinda  { background: rgba(224,184,114,.15); color: var(--altin); border: 1px solid var(--cizgi-2); }
.durum.gelistir { background: rgba(255,255,255,.05); color: var(--soluk); border: 1px solid rgba(255,255,255,.09); }

.etiketler { list-style: none; margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px; }
.etiketler li {
    font-size: 12.5px; color: var(--ikincil); background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.08); padding: 6px 13px; border-radius: 999px;
}
.baglantilar { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--cizgi); font-size: 13.5px; }
.baglantilar a { color: var(--ikincil); }
.baglantilar a:hover { color: var(--altin); }
.baglantilar em { color: var(--soluk); font-style: normal; margin: 0 9px; }

/* Kart içi mini ekran */
.mini-ekran {
    border-radius: 20px; padding: 14px; overflow: hidden;
    background: linear-gradient(180deg, #2A1E10 0%, #0D2026 44%, #071418 100%);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 22px 48px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.07);
}
.mini-satir { display: flex; align-items: center; gap: 11px; padding: 8px 4px; }
.mini-satir + .mini-satir { border-top: 1px solid rgba(255,255,255,.055); }
.mini-kapak {
    width: 38px; height: 38px; border-radius: 9px; flex: none;
    background: linear-gradient(158deg, #7A5526, #2B1E12);
    display: grid; place-items: center;
}
.mini-kapak svg { width: 17px; height: 17px; stroke: rgba(247,231,196,.75); fill: none; stroke-width: 1.7; }
.mini-satir.etkin .mini-kapak { background: linear-gradient(158deg, var(--altin), var(--altin-2)); box-shadow: 0 4px 14px rgba(224,184,114,.35); }
.mini-satir.etkin .mini-kapak svg { stroke: #14231F; }
.mini-ad { flex: 1; min-width: 0; }
.mini-ad b { display: block; font-size: 12px; font-weight: 620; color: #E8F0EF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-ad span { display: block; font-size: 10.5px; color: rgba(255,255,255,.42); margin-top: 2px; }
.mini-cubuk { height: 3px; border-radius: 2px; background: rgba(255,255,255,.14); margin: 12px 4px 5px; overflow: hidden; }
.mini-cubuk i { display: block; height: 100%; width: 56%; border-radius: 2px; background: linear-gradient(90deg, var(--altin-2), var(--altin-3)); }

/* ==========================================================================
   Kart ızgarası — alt sayfalarda kullanılıyor
   ========================================================================== */
.kartlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.kart {
    position: relative; overflow: hidden;
    background: linear-gradient(158deg, rgba(18,41,46,.86) 0%, rgba(9,24,28,.86) 100%);
    border: 1px solid var(--cizgi); border-radius: 22px; padding: 28px;
    transition: border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}
.kart::before { content:''; position:absolute; inset:0 0 auto 0; height:2px; background: linear-gradient(90deg, var(--altin), transparent 62%); opacity:.7; }
.kart:hover { border-color: var(--cizgi-2); transform: translateY(-3px); box-shadow: 0 20px 50px rgba(0,0,0,.42); }
.kart .ust { display: flex; align-items: center; gap: 15px; margin-bottom: 17px; }
.kart h3 { font-size: 20px; font-weight: 720; letter-spacing: -.024em; }
.kart > p { color: var(--ikincil); font-size: 15px; line-height: 1.74; }

.simge {
    width: 52px; height: 52px; border-radius: 15px; flex: none; display: grid; place-items: center; overflow: hidden;
    background: linear-gradient(160deg, rgba(224,184,114,.22), rgba(224,184,114,.06));
    border: 1px solid var(--cizgi-2);
    box-shadow: 0 8px 22px rgba(224,184,114,.13), inset 0 1px 0 rgba(255,255,255,.10);
}
.simge svg { width: 24px; height: 24px; stroke: var(--altin-3); fill: none; stroke-width: 1.7; }
.simge img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ==========================================================================
   Özellik ızgarası — alt sayfalarda kullanılıyor
   ========================================================================== */
.ozellikler { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.ozellik {
    background: linear-gradient(158deg, rgba(18,41,46,.7) 0%, rgba(9,24,28,.7) 100%);
    border: 1px solid var(--cizgi); border-radius: 20px; padding: 26px;
    transition: border-color .22s ease, transform .22s ease;
}
.ozellik:hover { border-color: var(--cizgi-2); transform: translateY(-2px); }
.ozellik .sim {
    width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; margin-bottom: 17px;
    background: linear-gradient(160deg, rgba(224,184,114,.22), rgba(224,184,114,.06));
    border: 1px solid var(--cizgi-2);
    box-shadow: 0 8px 22px rgba(224,184,114,.13), inset 0 1px 0 rgba(255,255,255,.10);
}
.ozellik .sim svg { width: 23px; height: 23px; stroke: var(--altin-3); fill: none; stroke-width: 1.7; }
.ozellik h3 { font-size: 17px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 9px; }
.ozellik p { color: var(--ikincil); font-size: 14.8px; line-height: 1.74; }

/* ==========================================================================
   Numaralı adımlar
   ========================================================================== */
.adimlar { list-style: none; counter-reset: adim; display: grid; gap: 14px; }
.adimlar li {
    counter-increment: adim; position: relative; padding: 22px 24px 22px 68px;
    border: 1px solid var(--cizgi); border-radius: 18px;
    background: linear-gradient(158deg, rgba(18,41,46,.6) 0%, rgba(9,24,28,.6) 100%);
    transition: border-color .2s ease;
}
.adimlar li:hover { border-color: var(--cizgi-2); }
.adimlar li::before {
    content: counter(adim); position: absolute; left: 22px; top: 22px;
    width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center;
    background: linear-gradient(160deg, var(--altin-3), var(--altin-2));
    color: #14231F; font-size: 13px; font-weight: 800;
    box-shadow: 0 6px 18px rgba(224,184,114,.28);
}
.adimlar b { display: block; font-size: 16px; font-weight: 700; margin-bottom: 5px; }
.adimlar p { color: var(--ikincil); font-size: 14.8px; line-height: 1.72; }

/* ==========================================================================
   Ses hattı — yatay zaman çizgisi
   ========================================================================== */
.hat { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; padding-top: 42px; }
.hat::before {
    content: ''; position: absolute; top: 20px; left: 6%; right: 6%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--cizgi-2) 12%, var(--cizgi-2) 88%, transparent);
}
.durak { position: relative; text-align: center; padding: 0 6px; }
.durak .nokta {
    position: absolute; top: -32px; left: 50%; transform: translateX(-50%);
    width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
    background: linear-gradient(160deg, var(--altin-3), var(--altin-2));
    color: #14231F; font-size: 12px; font-weight: 800;
    box-shadow: 0 0 0 5px rgba(6,16,20,1), 0 6px 18px rgba(224,184,114,.34);
}
.durak b { display: block; font-size: 15px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 8px; }
.durak p { color: var(--ikincil); font-size: 13.6px; line-height: 1.68; }
@media (max-width: 900px) {
    .hat { grid-template-columns: 1fr; gap: 14px; padding-top: 0; }
    .hat::before { display: none; }
    .durak { text-align: left; padding: 18px 20px 18px 62px; border: 1px solid var(--cizgi); border-radius: 16px; background: rgba(255,255,255,.02); }
    .durak .nokta { top: 18px; left: 20px; transform: none; }
}

/* ==========================================================================
   Vurgulu panel
   ========================================================================== */
.kutu {
    position: relative; overflow: hidden;
    background: linear-gradient(148deg, rgba(28,62,66,.92) 0%, rgba(9,25,29,.94) 100%);
    border: 1px solid var(--cizgi-2); border-radius: 28px; padding: 58px 44px; text-align: center;
}
.kutu::after { content:''; position:absolute; left:50%; top:-170px; transform:translateX(-50%); width:520px; height:340px; border-radius:50%; background: var(--altin); opacity:.11; filter: blur(60px); }
/* Köşe bezemesi */
.kutu .kose { position: absolute; width: 62px; height: 62px; stroke: var(--altin); fill: none; opacity: .28; }
.kutu .kose.sol  { top: 16px; left: 16px; }
.kutu .kose.sag  { bottom: 16px; right: 16px; transform: rotate(180deg); }
.kutu h2 { font-size: clamp(25px, 3.6vw, 36px); letter-spacing: -.032em; margin-bottom: 14px; position: relative; font-weight: 780; }
.kutu p { color: var(--ikincil); font-size: 16.2px; max-width: 36em; margin: 0 auto; position: relative; line-height: 1.78; }
.kutu .dugme { margin-top: 28px; position: relative; }
@media (max-width: 600px) { .kutu { padding: 42px 24px; } .kutu .kose { display: none; } }

/* ==========================================================================
   Açılır soru
   ========================================================================== */
.sss { display: grid; gap: 12px; }
.soru { border: 1px solid var(--cizgi); border-radius: 18px; background: rgba(255,255,255,.022); overflow: hidden; transition: border-color .2s, background .2s; }
.soru:hover { border-color: var(--cizgi-2); }
.soru[open] { background: rgba(224,184,114,.045); border-color: var(--cizgi-2); }
.soru summary { cursor: pointer; list-style: none; padding: 20px 56px 20px 24px; position: relative; font-size: 16.2px; font-weight: 650; letter-spacing: -.015em; }
.soru summary::-webkit-details-marker { display: none; }
.soru summary::after {
    content: ''; position: absolute; right: 24px; top: 50%; width: 9px; height: 9px;
    border-right: 2px solid var(--altin); border-bottom: 2px solid var(--altin);
    transform: translateY(-70%) rotate(45deg); transition: transform .22s ease;
}
.soru[open] summary::after { transform: translateY(-20%) rotate(-135deg); }
.soru .cevap { padding: 0 24px 22px; color: var(--ikincil); font-size: 15.2px; line-height: 1.8; }
.soru .cevap p + p { margin-top: 11px; }

/* ==========================================================================
   Belge sayfaları
   ========================================================================== */
.belge { padding: 60px 0 24px; }
.belge h1 { font-size: clamp(32px, 4.8vw, 46px); }
.belge .tarih { color: var(--soluk); font-size: 13.5px; margin-top: 15px; }
.belge h2 { font-size: 22px; font-weight: 720; letter-spacing: -.024em; margin: 40px 0 13px; color: var(--metin); }
.belge h3 { font-size: 17px; font-weight: 680; margin: 26px 0 9px; }
.belge p, .belge li { color: var(--ikincil); font-size: 15.8px; line-height: 1.85; }
.belge p + p { margin-top: 12px; }
.belge ul, .belge ol { margin: 13px 0 0 22px; display: grid; gap: 9px; }
.belge .not {
    margin-top: 32px; padding: 22px 24px; border-radius: 18px;
    border: 1px solid var(--cizgi); background: rgba(224,184,114,.045);
    font-size: 15px; color: var(--ikincil);
}

/* Bilgi satırları */
.satirlar { display: grid; border: 1px solid var(--cizgi); border-radius: 20px; overflow: hidden; background: rgba(255,255,255,.02); }
.satir { display: grid; grid-template-columns: 210px 1fr; gap: 18px; padding: 17px 24px; border-bottom: 1px solid var(--cizgi); font-size: 15px; }
.satir:last-child { border-bottom: none; }
.satir dt { color: var(--soluk); }
.satir dd { color: var(--metin); word-break: break-word; }
@media (max-width: 620px) { .satir { grid-template-columns: 1fr; gap: 4px; } }

/* ==========================================================================
   Alt bilgi
   ========================================================================== */
footer { flex: none; padding: 50px 0 44px; border-top: 1px solid var(--cizgi); color: var(--soluk); font-size: 13.5px; margin-top: 46px; position: relative; }
footer a { color: var(--ikincil); }
footer a:hover { color: var(--metin); }
.alt-ust { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 34px; padding-bottom: 34px; border-bottom: 1px solid var(--cizgi); }
@media (max-width: 820px) { .alt-ust { grid-template-columns: 1fr 1fr; gap: 30px; } }
@media (max-width: 480px) { .alt-ust { grid-template-columns: 1fr; } }
.alt-sutun h4 { font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--altin); margin-bottom: 16px; }
.alt-sutun ul { list-style: none; display: grid; gap: 10px; }
.alt-sutun p { line-height: 1.72; max-width: 26em; }
.alt-marka { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 15px; }
.alt-marka img { width: 40px; height: 40px; }
.alt-marka b { color: var(--metin); font-size: 15.5px; }
.alt-son { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: center; padding-top: 26px; }

/* ==========================================================================
   Görünürlük animasyonu
   ========================================================================== */
.beliren { opacity: 0; transform: translateY(24px); transition: opacity .75s cubic-bezier(.2,.7,.3,1), transform .75s cubic-bezier(.2,.7,.3,1); }
.beliren.gorundu { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .beliren { opacity: 1; transform: none; transition: none; }
    .doku, .rozet i, .telefon, .cubuk i, .dalga i, .disk .yayilim, .canli-etiket i { animation: none !important; }
}