/* KolayGorev tasarim sistemi v6
   Referans: bulutrandevu.com tasarim dili (ayni marka ailesi).
   Lacivert gradyan hero + beyaz bolumler, mavi gradyan birincil buton (14px),
   20px acik cerceveli kartlar, sistem fontu, 800 basliklar.
   Para yesili yalnizca TL tutarlarinda. */

:root {
    --lacivert-1: #0b1b33;
    --lacivert-2: #102a4e;
    --lacivert-3: #0d3b72;
    --koyu-metin: #0f1b2d;
    --metin: #33415a;
    --soluk: #5b6b83;
    --sessiz: #8b98ac;
    --cizgi: #e3eaf3;
    --cizgi-koyu: #d3dde9;
    --zemin: #ffffff;
    --zemin-acik: #f5f8fc;
    --mavi: #2196f3;
    --mavi-koyu: #1976d2;
    --mavi-acik: #e8f2fd;
    --yesil: #16824a;
    --yesil-acik: #e7f4ec;
    --yesil-canli: #2ecc71;
    --amber: #a06b08;
    --amber-acik: #fdf3da;
    --kirmizi: #c0392b;
    --kirmizi-acik: #fdecea;

    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    --r-buyuk: 20px;
    --r: 14px;
    --r-kucuk: 10px;

    --golge-kart: 0 10px 30px -12px rgba(11, 27, 51, .12);
    --golge-mavi: 0 12px 28px -8px rgba(33, 150, 243, .55);
    --golge-koyu: 0 24px 60px -20px rgba(11, 27, 51, .45);
    --gradyan-mavi: linear-gradient(135deg, #2196f3, #1976d2);
    --gradyan-lacivert: linear-gradient(165deg, #0b1b33 0%, #102a4e 55%, #0d3b72 100%);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font);
    font-size: 15.5px;
    line-height: 1.62;
    color: var(--metin);
    background: var(--zemin);
    -webkit-font-smoothing: antialiased;
}

::selection { background: var(--mavi); color: #fff; }
:focus-visible { outline: 3px solid var(--mavi); outline-offset: 2px; border-radius: 4px; }

a { color: var(--mavi-koyu); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { max-width: 100%; vertical-align: middle; }

h1, h2, h3 { color: var(--koyu-metin); font-weight: 800; line-height: 1.16; letter-spacing: -0.02em; }
h2 { font-size: clamp(26px, 3.2vw, 38px); }
h3 { font-size: 17px; }

.kapsayici { max-width: 1160px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.mono { font-variant-numeric: tabular-nums; }

.ust-etiket {
    display: inline-block;
    font-size: 12.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    color: var(--mavi-koyu);
    margin-bottom: 12px;
}

/* Scroll-reveal */
.js .acil { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.js .acil.goster { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .acil { opacity: 1; transform: none; transition: none; } }

/* ================= UST CUBUK ================= */
.duyuru {
    background: var(--lacivert-1); color: #b9c6dd;
    font-size: 12.5px; font-weight: 550;
    text-align: center; padding: 8px 16px;
}
.duyuru b { color: #7fd8a5; font-weight: 700; }

.ustbar {
    position: sticky; top: 0; z-index: 90;
    background: rgba(255, 255, 255, .96);
    border-bottom: 1px solid var(--cizgi);
}
.ustbar-ic { display: flex; align-items: center; justify-content: space-between; height: 66px; gap: 18px; }
.logo { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; color: var(--koyu-metin); text-decoration: none; }
.logo:hover { text-decoration: none; }
.logo b { color: var(--mavi); font-weight: 800; }
.ustbar nav { display: flex; gap: 4px; align-items: center; }
.ustbar nav a:not(.btn) {
    color: var(--metin); font-weight: 600; font-size: 14.5px;
    padding: 8px 13px; border-radius: 10px;
}
.ustbar nav a:not(.btn):hover { background: var(--zemin-acik); color: var(--koyu-metin); text-decoration: none; }
.ustbar .btn { margin-left: 10px; }

/* ================= BUTONLAR ================= */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    padding: 0 28px; min-height: 48px;
    border: 0; border-radius: var(--r);
    background: var(--gradyan-mavi); color: #fff;
    font-family: var(--font); font-size: 15px; font-weight: 700;
    cursor: pointer; white-space: nowrap; text-decoration: none;
    box-shadow: var(--golge-mavi);
    transition: transform .14s, box-shadow .16s, filter .15s;
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.06); text-decoration: none; box-shadow: 0 16px 34px -10px rgba(33, 150, 243, .6); }
.btn:active { transform: translateY(0); }
.btn .ok { transition: transform .15s; }
.btn:hover .ok { transform: translateX(3px); }
.btn-hayalet {
    background: rgba(255, 255, 255, .07); color: #eaf3fc;
    border: 1px solid rgba(255, 255, 255, .22);
    box-shadow: none;
}
.btn-hayalet:hover { background: rgba(255, 255, 255, .14); filter: none; }
.btn-ikincil {
    background: #fff; color: var(--koyu-metin);
    border: 1px solid var(--cizgi-koyu); box-shadow: none;
}
.btn-ikincil:hover { border-color: var(--mavi); color: var(--mavi-koyu); filter: none; box-shadow: none; }
.btn-beyaz { background: #fff; color: var(--lacivert-2); box-shadow: 0 12px 28px -10px rgba(0, 0, 0, .35); }
.btn-beyaz:hover { filter: none; }
.btn-buyuk { min-height: 54px; padding: 0 34px; font-size: 15.5px; }
.btn-blok { display: flex; width: 100%; }

/* ================= KART / ROZET ================= */
.kart {
    background: #fff;
    border: 1px solid var(--cizgi);
    border-radius: var(--r-buyuk);
    padding: 26px;
}
.rozet {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px; border-radius: 99px;
    font-size: 12.5px; font-weight: 700;
}
.rozet-onay { background: var(--yesil-acik); color: var(--yesil); }
.rozet-bekleyen { background: var(--amber-acik); color: var(--amber); }
.rozet-uyari, .kilit-rozet { background: var(--kirmizi-acik); color: var(--kirmizi); }
.rozet-notr { background: var(--mavi-acik); color: var(--mavi-koyu); }
.rozet-soluk { background: var(--zemin-acik); color: var(--soluk); }

.tutar { font-variant-numeric: tabular-nums; font-weight: 800; color: var(--yesil); letter-spacing: -0.01em; }

.ikon-kare {
    width: 46px; height: 46px; border-radius: 13px;
    background: var(--mavi-acik); color: var(--mavi-koyu);
    display: inline-flex; align-items: center; justify-content: center;
    flex: none;
}

/* Bildirim zili */
.zil {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 12px;
    color: var(--metin);
}
.zil:hover { background: var(--zemin-acik); color: var(--koyu-metin); text-decoration: none; }
.zil-sayac {
    position: absolute; top: 3px; right: 3px;
    min-width: 17px; height: 17px; padding: 0 4px;
    background: var(--kirmizi); color: #fff;
    border-radius: 99px;
    font-size: 10.5px; font-weight: 800; line-height: 17px; text-align: center;
}

/* ================= KAYIT / GIRIS EKRANI ================= */
.auth-yerlesim { background: var(--gradyan-lacivert); padding: 44px 0 64px; }
.auth-ic { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; }

.auth-yan { color: #b7c7dd; }
.auth-yan-baslik { color: #fff; font-size: clamp(26px, 3.2vw, 38px); font-weight: 800; letter-spacing: -0.03em; margin: 20px 0 12px; }
.auth-yan-alt { font-size: 16px; color: #93a7c4; margin-bottom: 28px; }
.auth-madde { list-style: none; display: flex; flex-direction: column; gap: 18px; margin-bottom: 28px; }
.auth-madde li { display: flex; gap: 13px; align-items: flex-start; }
.auth-madde .tik {
    flex: none; width: 24px; height: 24px; border-radius: 8px;
    background: rgba(46, 204, 113, .18); color: #5ee394;
    display: inline-flex; align-items: center; justify-content: center;
    margin-top: 2px;
}
.auth-madde b { display: block; color: #fff; font-size: 14.5px; font-weight: 700; margin-bottom: 2px; }
.auth-madde span { display: block; font-size: 13.5px; color: #93a7c4; line-height: 1.5; }
.auth-uyari {
    font-size: 13px; color: #93a7c4;
    border-left: 3px solid rgba(255, 255, 255, .18);
    padding-left: 14px;
}

.auth-kart {
    background: #fff;
    border-radius: 22px;
    padding: 34px 34px 30px;
    box-shadow: 0 30px 70px -25px rgba(0, 0, 0, .55);
}
.auth-baslik { margin-bottom: 22px; }
.auth-baslik h1 { font-size: 26px; letter-spacing: -0.025em; margin-bottom: 4px; }
.auth-baslik p { font-size: 14px; color: var(--soluk); }
.auth-form .form-grup { margin-bottom: 16px; }
.form-ikili { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.istege-bagli { font-weight: 500; color: var(--sessiz); }

/* Cinsiyet gibi kisa secimler icin pil butonlar */
.secim-satir { display: flex; gap: 8px; flex-wrap: wrap; }
.secim-pil { position: relative; flex: 1; min-width: 92px; }
.secim-pil input { position: absolute; opacity: 0; width: 0; height: 0; }
.secim-pil span {
    display: block; text-align: center; cursor: pointer;
    padding: 11px 10px; border-radius: 12px;
    border: 1.5px solid var(--cizgi-koyu);
    font-size: 13.5px; font-weight: 650; color: var(--metin);
    transition: border-color .13s, background .13s, color .13s;
}
.secim-pil:hover span { border-color: var(--mavi); }
.secim-pil input:checked + span { border-color: var(--mavi); background: var(--mavi-acik); color: var(--mavi-koyu); }
.secim-pil input:focus-visible + span { outline: 3px solid var(--mavi); outline-offset: 2px; }

.onay-satir {
    display: flex; gap: 10px; align-items: flex-start;
    font-size: 13.5px; color: var(--metin); line-height: 1.5;
    margin: 4px 0 18px;
}
.onay-satir input { margin-top: 3px; flex: none; width: 17px; height: 17px; }

@media (max-width: 940px) {
    .auth-ic { grid-template-columns: 1fr; gap: 34px; }
    .auth-yan { order: 2; }
    .auth-kart { order: 1; }
}
@media (max-width: 520px) {
    .auth-yerlesim { padding: 24px 0 40px; }
    .auth-kart { padding: 26px 20px 24px; border-radius: 18px; }
    .form-ikili { grid-template-columns: 1fr; }
    .secim-pil { min-width: 100%; }
}

/* ===== Kayit rol secici: gorev yapan / gorev veren ===== */
.rol-secici {
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
    padding: 6px; margin-bottom: 24px;
    background: var(--zemin-acik);
    border: 1px solid var(--cizgi); border-radius: 16px;
}
.rol-secici a {
    display: block; padding: 10px 12px; border-radius: 11px;
    text-align: center; text-decoration: none;
    transition: background .14s, box-shadow .14s;
}
.rol-secici a:hover { background: rgba(255, 255, 255, .7); text-decoration: none; }
.rol-secici a b { display: block; font-size: 14px; font-weight: 750; color: var(--soluk); letter-spacing: -0.01em; }
.rol-secici a span { display: block; font-size: 11.5px; color: var(--sessiz); margin-top: 1px; }
.rol-secici a.aktif { background: #fff; box-shadow: 0 3px 10px -3px rgba(11, 27, 51, .22); }
.rol-secici a.aktif b { color: var(--mavi-koyu); }
.rol-secici a.aktif span { color: var(--soluk); }
.veren .rol-secici a.aktif b { color: #8a5a06; }

/* ===== Gorev veren kayit: acik kurumsal zemin, form solda, koyu bilgi karti sagda ===== */
.auth-yerlesim.veren { background: linear-gradient(180deg, #edf3fa 0%, #f6fafd 58%, #fff 100%); }
.auth-yerlesim.veren .auth-ic { grid-template-columns: 1.02fr 1fr; align-items: start; }
.auth-kart-veren { border: 1px solid var(--cizgi); box-shadow: 0 20px 48px -28px rgba(11, 27, 51, .5); }

.veren-yan {
    background: var(--gradyan-lacivert);
    border-radius: 22px; padding: 30px 28px 26px;
    box-shadow: var(--golge-koyu);
    color: #93a7c4;
    position: sticky; top: 24px;
}
.veren-yan .hero-pill { margin-bottom: 18px; }
.veren-yan .hero-pill .nokta { background: #f0b429; }
.veren-yan h2 { color: #fff; font-size: clamp(23px, 2.4vw, 28px); margin-bottom: 10px; }
.veren-yan .veren-alt { font-size: 14.5px; color: #93a7c4; margin-bottom: 20px; }
.veren-adim { display: grid; grid-template-columns: 30px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .09); }
.veren-adim:last-of-type { border-bottom: 0; }
.veren-adim .no {
    width: 30px; height: 30px; border-radius: 10px; flex: none;
    background: rgba(240, 180, 41, .16); color: #f0b429;
    font-size: 13px; font-weight: 800;
    display: inline-flex; align-items: center; justify-content: center;
}
.veren-adim b { display: block; color: #fff; font-size: 14px; font-weight: 700; margin-bottom: 1px; }
.veren-adim span { display: block; font-size: 13px; color: #93a7c4; line-height: 1.5; }
.veren-not { font-size: 12.5px; color: #93a7c4; border-left: 3px solid rgba(240, 180, 41, .5); padding-left: 13px; line-height: 1.55; }

.kod-girdi {
    text-align: center; letter-spacing: .5em; font-size: 22px; font-weight: 700;
    font-variant-numeric: tabular-nums; padding-left: .5em;
}

.tel-girdi { display: flex; }
.tel-girdi .onek {
    display: inline-flex; align-items: center;
    padding: 0 12px; border: 1.5px solid var(--cizgi-koyu); border-right: 0;
    border-radius: var(--r) 0 0 var(--r);
    background: var(--zemin-acik); color: var(--soluk);
    font-size: 14px; font-weight: 650;
}
.tel-girdi .girdi { border-radius: 0 var(--r) var(--r) 0; }

@media (max-width: 940px) {
    .auth-yerlesim.veren .auth-ic { grid-template-columns: 1fr; }
    .veren-yan { position: static; order: 2; }
    .auth-kart-veren { order: 1; }
}

/* Uyelik / hesap tipi secim kartlari */
.tip-secim { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tip-kart {
    display: block; cursor: pointer;
    border: 1.5px solid var(--cizgi-koyu); border-radius: 14px;
    padding: 14px 16px;
    transition: border-color .14s, background .14s;
}
.tip-kart:hover { border-color: var(--mavi); }
.tip-kart:has(input:checked) { border-color: var(--mavi); background: var(--mavi-acik); }
.tip-kart input { position: absolute; opacity: 0; }
.tip-kart b { display: block; color: var(--koyu-metin); font-size: 14.5px; margin-bottom: 3px; }
.tip-kart span { display: block; font-size: 12.5px; color: var(--soluk); line-height: 1.45; }
@media (max-width: 480px) { .tip-secim { grid-template-columns: 1fr; } }

/* Redaksiyon bari (uye olmayana maskeli gorev adi) */
.redakte {
    display: inline-block;
    width: 8ch; height: .7em;
    margin-left: 7px;
    vertical-align: baseline;
    border-radius: 4px;
    background: repeating-linear-gradient(90deg,
        #c7d2e0 0 14px, #d8e0eb 14px 26px);
}

/* ================= FORM ================= */
.form-grup { margin-bottom: 18px; }
.form-grup label { display: block; font-weight: 700; margin-bottom: 7px; font-size: 13.5px; color: var(--koyu-metin); }
.girdi {
    width: 100%; padding: 12px 15px; min-height: 48px;
    border: 1.5px solid var(--cizgi-koyu); border-radius: 12px;
    font-size: 15px; font-family: var(--font);
    background: #fff; color: var(--koyu-metin);
    transition: border-color .15s, box-shadow .15s;
}
.girdi:focus { outline: none; border-color: var(--mavi); box-shadow: 0 0 0 4px rgba(33, 150, 243, .15); }
.form-not { font-size: 13px; color: var(--soluk); margin-top: 6px; }

.uyari { padding: 13px 16px; border-radius: 12px; margin-bottom: 18px; font-size: 14.5px; font-weight: 550; }
.uyari-hata { background: var(--kirmizi-acik); color: var(--kirmizi); }
.uyari-bilgi { background: var(--mavi-acik); color: var(--mavi-koyu); }
.uyari-basari { background: var(--yesil-acik); color: var(--yesil); }

main { min-height: 60vh; }
.sayfa { padding: 44px 0 84px; }

/* ================= HERO ================= */
.hero { background: var(--gradyan-lacivert); color: #c6d4e8; overflow: hidden; position: relative; }
.hero::before {
    content: ""; position: absolute; right: -140px; top: -140px;
    width: 460px; height: 460px; border-radius: 50%;
    background: radial-gradient(circle, rgba(33, 150, 243, .22), transparent 68%);
    pointer-events: none;
}
.hero-ic {
    position: relative;
    display: grid; grid-template-columns: 1.04fr .96fr; gap: 54px;
    align-items: center;
    /* alt boslugun bir kismi hero-band'in bindirmesi icin ayrilir */
    padding-top: 72px; padding-bottom: 104px;
}
.hero-pill {
    display: inline-flex; align-items: center; gap: 9px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .2);
    color: #dbe7f6;
    padding: 8px 16px; border-radius: 99px;
    font-size: 13px; font-weight: 650;
    margin-bottom: 24px;
}
.hero-pill .nokta { width: 8px; height: 8px; border-radius: 50%; background: var(--yesil-canli); }
.hero h1 { color: #fff; font-size: clamp(34px, 4.8vw, 56px); font-weight: 800; letter-spacing: -0.03em; margin-bottom: 10px; }
.hero .h1-alt { color: #eaf3fc; font-size: clamp(22px, 2.8vw, 32px); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 18px; }
.hero .h1-alt b { color: #64b5f6; font-weight: 800; }
.hero-alt { font-size: 17px; color: #b7c7dd; max-width: 50ch; margin-bottom: 30px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 40px; }
.hero-statlar { display: flex; gap: 44px; flex-wrap: wrap; }
.hero-stat .deger { color: #fff; font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.hero-stat .deger.para { color: #7fd8a5; }
.hero-stat .ad { font-size: 13px; color: #93a7c4; margin-top: 2px; }

/* hero sag: panel mock + yuzen bildirim */
.hero-gorsel { position: relative; min-height: 430px; }
.panel-mock {
    position: absolute; top: 12px; left: 0; right: 34px;
    background: #fff; border-radius: 18px;
    box-shadow: var(--golge-koyu);
    overflow: hidden;
}
.panel-mock .bar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 18px; border-bottom: 1px solid var(--cizgi);
    font-size: 13.5px; font-weight: 700; color: var(--koyu-metin);
}
.panel-mock .bakiye-blok { padding: 16px 18px 6px; }
.panel-mock .bakiye-blok .etiket { font-size: 12px; color: var(--soluk); font-weight: 600; }
.panel-mock .bakiye-blok .deger { font-size: 30px; font-weight: 800; color: var(--yesil); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.panel-mock .satirlar { padding: 8px 6px 12px; }
.panel-satir {
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: 10px;
    font-size: 13.5px;
}
.panel-satir:hover { background: var(--zemin-acik); }
.panel-satir .sol { display: flex; align-items: center; gap: 10px; color: var(--metin); }
.panel-satir .mini-ikon {
    width: 30px; height: 30px; border-radius: 9px;
    background: var(--mavi-acik); color: var(--mavi-koyu);
    display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.panel-satir .deger { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--yesil); white-space: nowrap; }
.bildirim-mock {
    position: absolute; right: 0; bottom: 26px;
    display: flex; gap: 12px; align-items: center;
    background: #fff; border-radius: 15px;
    box-shadow: var(--golge-koyu);
    padding: 14px 18px;
    max-width: 300px;
}
.bildirim-mock .ikon {
    width: 40px; height: 40px; border-radius: 12px; flex: none;
    background: var(--yesil-acik); color: var(--yesil);
    display: flex; align-items: center; justify-content: center;
}
.bildirim-mock .baslik { font-weight: 800; color: var(--koyu-metin); font-size: 14px; }
.bildirim-mock .detay { font-size: 12.5px; color: var(--soluk); }

/* hero alti guven seridi: hero'nun alt kenarina binen beyaz panel.
   Hero ile temas etmemesi icin acik zemin + negatif margin ile kasitli bindirme. */
.hero-band {
    background: var(--zemin-acik);
    padding: 0 0 44px;
    position: relative; z-index: 5;
    margin-top: -46px; /* hero'nun alt bosluguna oturur */
}
.hero-band-ic {
    display: grid; grid-template-columns: repeat(4, 1fr);
    background: #fff;
    border: 1px solid var(--cizgi);
    border-radius: var(--r-buyuk);
    box-shadow: 0 18px 44px -22px rgba(11, 27, 51, .45);
    overflow: hidden;
}
.band-kart {
    display: flex; align-items: center; gap: 13px;
    padding: 20px 22px;
    border-right: 1px solid var(--cizgi);
    min-width: 0; /* uzun metinlerde tasmayi engeller */
}
.band-kart:last-child { border-right: 0; }
.band-ikon {
    flex: none;
    width: 38px; height: 38px; border-radius: 11px;
    background: var(--mavi-acik); color: var(--mavi-koyu);
    display: inline-flex; align-items: center; justify-content: center;
}
.band-metin { min-width: 0; }
.band-kart .deger {
    display: block;
    color: var(--koyu-metin); font-weight: 800; font-size: 16px; line-height: 1.25;
    letter-spacing: -0.01em; white-space: nowrap;
}
.band-kart .ad {
    display: block;
    color: var(--soluk); font-size: 12.5px; line-height: 1.4; margin-top: 3px;
}

/* ================= BOLUMLER ================= */
.bolum { padding: 84px 0; }
.bolum-acik { background: var(--zemin-acik); }
.bolum-baslik { max-width: 680px; margin: 0 auto 46px; text-align: center; }
.bolum-baslik p { color: var(--soluk); font-size: 16.5px; margin-top: 12px; }
.bolum-baslik-sol { max-width: 640px; margin-bottom: 42px; }
.bolum-baslik-sol p { color: var(--soluk); font-size: 16.5px; margin-top: 12px; }

/* Ozellik kartlari */
.ozellik-izgara { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.ozellik-kart { padding: 28px; transition: transform .16s, box-shadow .16s; }
.ozellik-kart:hover { transform: translateY(-4px); box-shadow: var(--golge-kart); }
.ozellik-kart .ikon-kare { margin-bottom: 18px; }
.ozellik-kart h3 { margin-bottom: 8px; }
.ozellik-kart p { font-size: 14.5px; color: var(--soluk); }

/* Gorev listesi (canli vitrin) */
.gorev-liste { border: 1px solid var(--cizgi); border-radius: var(--r-buyuk); overflow: hidden; background: #fff; }
.gorev-liste-baslik {
    display: grid; grid-template-columns: 64px 1.2fr 2fr 1fr 1fr auto; gap: 14px; align-items: center;
    padding: 13px 22px;
    background: var(--zemin-acik);
    border-bottom: 1px solid var(--cizgi);
    font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--soluk);
}
.gorev-satir {
    display: grid; grid-template-columns: 64px 1.2fr 2fr 1fr 1fr auto; gap: 14px; align-items: center;
    padding: 17px 22px;
    border-bottom: 1px solid var(--cizgi);
    font-size: 14.5px;
    transition: background .13s;
}
.gorev-satir:last-child { border-bottom: 0; }
.gorev-satir:hover { background: var(--zemin-acik); }
.gorev-satir .no { font-size: 12.5px; color: var(--sessiz); font-variant-numeric: tabular-nums; }
.gorev-satir .kategori { font-size: 13px; font-weight: 700; color: var(--mavi-koyu); }
.gorev-satir .ad { font-weight: 700; color: var(--koyu-metin); }
.gorev-satir .kontenjan { font-size: 13.5px; color: var(--soluk); }
.gorev-satir .kazanc { font-size: 16.5px; text-align: right; white-space: nowrap; }
.gorev-satir .git { text-align: right; font-weight: 700; font-size: 14px; }

/* Taahhut kartlari */
.taahhut-izgara { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.taahhut-kart { padding: 26px 24px; }
.taahhut-kart .tik-yuvarlak {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--yesil-acik); color: var(--yesil);
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 16px;
}
.taahhut-kart h3 { font-size: 16px; margin-bottom: 7px; }
.taahhut-kart p { font-size: 14px; color: var(--soluk); }

/* Koyu bant (B2B ve final) */
.koyu-bant {
    background: var(--gradyan-lacivert);
    border-radius: var(--r-buyuk);
    padding: 56px 52px;
    color: #b7c7dd;
    position: relative; overflow: hidden;
}
.koyu-bant::before {
    content: ""; position: absolute; left: -120px; bottom: -160px;
    width: 380px; height: 380px; border-radius: 50%;
    background: radial-gradient(circle, rgba(33, 150, 243, .2), transparent 68%);
}
.koyu-bant .ust-etiket { color: #64b5f6; }
.koyu-bant h2 { color: #fff; }
.b2b-ic { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.b2b-ic p { font-size: 15.5px; margin: 12px 0 20px; max-width: 54ch; }
.b2b-maddeler { margin-bottom: 28px; }
.b2b-maddeler li { list-style: none; display: flex; gap: 11px; align-items: center; padding: 6px 0; font-size: 14.5px; color: #dbe7f6; }
.b2b-maddeler .tik { color: var(--yesil-canli); font-weight: 800; }

.rapor-mock { background: #fff; border-radius: 16px; padding: 22px; box-shadow: var(--golge-koyu); position: relative; }
.rapor-mock .baslik { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.rapor-mock .baslik .ad { font-weight: 800; font-size: 14.5px; color: var(--koyu-metin); }
.rapor-kartlar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.rapor-kart { background: var(--zemin-acik); border-radius: 12px; padding: 12px 14px; }
.rapor-kart .etiket { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--soluk); font-weight: 700; }
.rapor-kart .deger { font-size: 19px; font-weight: 800; color: var(--koyu-metin); font-variant-numeric: tabular-nums; margin-top: 2px; }
.rapor-kart .deger.para { color: var(--yesil); }
.rapor-cubuklar { display: flex; align-items: flex-end; gap: 5px; height: 50px; }
.rapor-cubuklar span { flex: 1; background: var(--mavi-acik); border-radius: 3px 3px 0 0; }
.rapor-cubuklar span:nth-child(4n) { background: var(--mavi); }

/* SSS */
.sss { max-width: 780px; margin: 0 auto; }
.sss details { background: #fff; border: 1px solid var(--cizgi); border-radius: var(--r); margin-bottom: 10px; overflow: hidden; }
.sss summary {
    list-style: none; cursor: pointer;
    display: flex; justify-content: space-between; align-items: center; gap: 14px;
    padding: 17px 20px;
    font-weight: 750; font-size: 15.5px; color: var(--koyu-metin);
}
.sss summary::-webkit-details-marker { display: none; }
.sss summary .isaret { font-size: 20px; color: var(--mavi); transition: transform .18s; flex: none; font-weight: 600; }
.sss details[open] summary .isaret { transform: rotate(45deg); }
.sss .cevap { padding: 0 20px 18px; color: var(--soluk); font-size: 14.5px; }

/* Final CTA */
.final-bant { text-align: center; padding: 64px 40px; }
.final-bant h2 { margin-bottom: 12px; }
.final-bant p { font-size: 16px; margin-bottom: 28px; }
.final-bant .not { display: block; margin-top: 16px; font-size: 13px; color: #8fa3c2; }

/* ================= FOOTER ================= */
footer { background: var(--lacivert-1); color: #9db0cc; padding: 54px 0 34px; font-size: 14px; }
footer .logo { color: #fff; }
.footer-izgara { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 36px; }
.footer-izgara h4 { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: #6d82a6; margin-bottom: 14px; }
.footer-izgara a { display: block; color: #c3cfe2; padding: 4px 0; text-decoration: none; }
.footer-izgara a:hover { color: #fff; }
.footer-alt {
    border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 22px;
    display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
    font-size: 13px; color: #6d82a6;
}

/* ================= IC SAYFALAR ================= */
.panel-nav {
    display: flex; gap: 4px; flex-wrap: wrap;
    border-bottom: 1px solid var(--cizgi);
    margin-bottom: 28px;
}
.panel-nav a {
    padding: 10px 16px 12px;
    font-weight: 700; font-size: 14.5px; color: var(--soluk);
    text-decoration: none;
    border-bottom: 2.5px solid transparent;
    margin-bottom: -1px;
}
.panel-nav a:hover { color: var(--koyu-metin); }
.panel-nav a.aktif { color: var(--mavi-koyu); border-bottom-color: var(--mavi); }

.sayfa-baslik { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.sayfa-baslik h1 { font-size: 26px; letter-spacing: -0.02em; }

/* Gorev detay */
.detay-yerlesim { display: grid; grid-template-columns: 1.15fr .85fr; gap: 22px; align-items: start; }
.adim-listesi { counter-reset: adim; }
.adim-satir {
    counter-increment: adim;
    display: grid; grid-template-columns: 34px 1fr; gap: 12px;
    padding: 13px 0;
    border-bottom: 1px solid var(--cizgi);
    font-size: 14.5px; color: var(--metin);
}
.adim-satir:last-child { border-bottom: 0; }
.adim-satir::before {
    content: counter(adim);
    width: 26px; height: 26px; border-radius: 8px;
    background: var(--mavi-acik); color: var(--mavi-koyu);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 13px;
}
.kanit-alan { margin-bottom: 16px; }
.kanit-dosya-kutu {
    border: 2px dashed var(--cizgi-koyu); border-radius: 14px;
    padding: 20px; text-align: center; cursor: pointer;
    color: var(--soluk); font-size: 14px;
    transition: border-color .15s, background .15s;
    position: relative;
}
.kanit-dosya-kutu:hover { border-color: var(--mavi); background: var(--mavi-acik); }
.kanit-dosya-kutu input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.kanit-onizleme { margin-top: 10px; }
.kanit-onizleme img { max-height: 140px; border-radius: 10px; border: 1px solid var(--cizgi); }

/* Durum cizelgesi (gonderim + cekim ortak) */
.cizelge { display: flex; flex-direction: column; gap: 0; }
.cizelge-adim { display: grid; grid-template-columns: 26px 1fr; gap: 12px; padding-bottom: 16px; position: relative; }
.cizelge-adim::before {
    content: ""; position: absolute; left: 12px; top: 24px; bottom: -2px;
    width: 2px; background: var(--cizgi);
}
.cizelge-adim:last-child { padding-bottom: 0; }
.cizelge-adim:last-child::before { display: none; }
.cizelge-nokta {
    width: 26px; height: 26px; border-radius: 50%;
    border: 2px solid var(--cizgi-koyu); background: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; z-index: 1;
}
.cizelge-adim.tamam .cizelge-nokta { background: var(--yesil); border-color: var(--yesil); }
.cizelge-adim.aktif .cizelge-nokta { border-color: var(--mavi); background: var(--mavi-acik); }
.cizelge-adim .ad { font-weight: 700; color: var(--koyu-metin); font-size: 14.5px; }
.cizelge-adim .not { font-size: 13px; color: var(--soluk); }

/* ================= GOREVLER EKRANI ================= */
.gorev-arac { display: flex; gap: 8px; flex-wrap: wrap; }

.kat-cipler {
    display: flex; gap: 8px; flex-wrap: nowrap; overflow-x: auto;
    padding-bottom: 8px; margin-bottom: 20px;
    -webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
.kat-cip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 14px; border-radius: 99px;
    background: #fff; border: 1.5px solid var(--cizgi);
    font-size: 13.5px; font-weight: 650; color: var(--metin);
    white-space: nowrap; text-decoration: none;
    transition: border-color .13s, background .13s;
}
.kat-cip:hover { border-color: var(--mavi); text-decoration: none; }
.kat-cip.secili { background: var(--koyu-metin); border-color: var(--koyu-metin); color: #fff; }
.kat-cip .sayi {
    font-size: 11.5px; font-weight: 800;
    background: var(--zemin-acik); color: var(--soluk);
    border-radius: 99px; padding: 1px 7px;
}
.kat-cip.secili .sayi { background: rgba(255, 255, 255, .18); color: #fff; }
.kat-cip .kat-ikon { display: inline-flex; }

/* Platform renkleri (ikon karelerinde ve ciplerde) */
.kat-ikon-kare {
    width: 44px; height: 44px; border-radius: 13px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--mavi-acik); color: var(--mavi-koyu);
}
.kat-instagram .kat-ikon, .kat-ikon-kare.kat-instagram { color: #c13584; }
.kat-ikon-kare.kat-instagram { background: #fbe9f3; }
.kat-tiktok .kat-ikon, .kat-ikon-kare.kat-tiktok { color: #111; }
.kat-ikon-kare.kat-tiktok { background: #eceff3; }
.kat-youtube .kat-ikon, .kat-ikon-kare.kat-youtube { color: #d21f1f; }
.kat-ikon-kare.kat-youtube { background: #fdebe9; }
.kat-facebook .kat-ikon, .kat-ikon-kare.kat-facebook { color: #1666d1; }
.kat-ikon-kare.kat-facebook { background: #e7f0fc; }
.kat-x .kat-ikon, .kat-ikon-kare.kat-x { color: #111; }
.kat-ikon-kare.kat-x { background: #eceff3; }
.kat-telegram .kat-ikon, .kat-ikon-kare.kat-telegram { color: #229ed9; }
.kat-ikon-kare.kat-telegram { background: #e6f4fb; }
.kat-linkedin .kat-ikon, .kat-ikon-kare.kat-linkedin { color: #0a66c2; }
.kat-ikon-kare.kat-linkedin { background: #e6f0fa; }
.kat-oyun .kat-ikon, .kat-ikon-kare.kat-oyun { color: #7b2ff2; }
.kat-ikon-kare.kat-oyun { background: #f1eafd; }
.kat-uygulama-testi .kat-ikon, .kat-ikon-kare.kat-uygulama-testi { color: var(--mavi-koyu); }
.kat-google .kat-ikon, .kat-ikon-kare.kat-google { color: #188038; }
.kat-ikon-kare.kat-google { background: #e7f4ec; }
.kat-anket .kat-ikon, .kat-ikon-kare.kat-anket { color: #a06b08; }
.kat-ikon-kare.kat-anket { background: #fdf3da; }
.kat-kayit .kat-ikon, .kat-ikon-kare.kat-kayit { color: #12813f; }
.kat-ikon-kare.kat-kayit { background: #e7f4ec; }
.kat-web .kat-ikon, .kat-ikon-kare.kat-web { color: #0d7a8a; }
.kat-ikon-kare.kat-web { background: #e5f4f6; }

/* Zengin gorev kartlari */
.gorev-kart-izgara { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); }
.gorev-kart2 {
    display: flex; flex-direction: column; gap: 12px;
    text-decoration: none; color: var(--metin);
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.gorev-kart2:hover { transform: translateY(-3px); box-shadow: var(--golge-kart); border-color: var(--cizgi-koyu); text-decoration: none; }
.gorev-kart2.dolu { opacity: .55; cursor: default; }
.gorev-kart2.dolu:hover { transform: none; box-shadow: none; }
.gorev-kart2 .ust { display: flex; gap: 12px; align-items: center; }
.gorev-kart2 .kat-ad { font-size: 12.5px; font-weight: 800; color: var(--koyu-metin); }
.gorev-kart2 .no { font-size: 11.5px; color: var(--sessiz); font-variant-numeric: tabular-nums; }
.gorev-kart2 .fiyat { margin-left: auto; font-size: 19px; white-space: nowrap; }
.gorev-kart2 .ad { font-weight: 750; font-size: 15.5px; color: var(--koyu-metin); line-height: 1.4; min-height: 2.8em; }
.gorev-kart2 .meta { display: flex; gap: 6px; flex-wrap: wrap; }
.gorev-kart2 .alt { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: auto; }
.kontenjan-blok { flex: 1; }
.kontenjan-cubuk { height: 6px; border-radius: 4px; background: var(--zemin-acik); overflow: hidden; }
.kontenjan-cubuk span { display: block; height: 100%; background: var(--mavi); border-radius: 4px; }
.kontenjan-metin { font-size: 12px; color: var(--soluk); display: block; margin-top: 4px; }
.gorev-kart2 .git { font-weight: 700; font-size: 13.5px; color: var(--mavi-koyu); white-space: nowrap; }

/* Islem listesi */
.islem-satir {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 13px 4px;
    border-bottom: 1px solid var(--cizgi);
    font-size: 14.5px;
}
.islem-satir:last-child { border-bottom: 0; }
.islem-satir .ad { color: var(--metin); }
.islem-satir .zaman { font-size: 12.5px; color: var(--sessiz); }
.islem-satir .deger { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.islem-satir .deger.arti { color: var(--yesil); }
.islem-satir .deger.eksi { color: var(--koyu-metin); }

@media (max-width: 960px) {
    .detay-yerlesim { grid-template-columns: 1fr; }
}

/* ================= PANEL ================= */
.panel-izgara { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 20px; }
.bakiye-kart .etiket { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--soluk); margin-bottom: 8px; }
.bakiye-kart .deger { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; color: var(--koyu-metin); font-variant-numeric: tabular-nums; }
.bakiye-kart .deger.para { color: var(--yesil); }
.bakiye-kart .deger.bekleyen { color: var(--amber); }
.davet-kod {
    display: inline-block; font-size: 20px; font-weight: 800; letter-spacing: 4px;
    background: var(--mavi-acik); color: var(--mavi-koyu);
    padding: 7px 16px; border-radius: 12px; margin: 2px 0 8px;
}

/* Dar sayfalar */
.dar { max-width: 440px; margin: 0 auto; }
.dar .kart { padding: 32px 30px; box-shadow: var(--golge-kart); }
.dar h1 { font-size: 25px; margin-bottom: 24px; }

.icerik-dar { max-width: 780px; margin: 0 auto; }
.icerik-dar h1 { font-size: clamp(28px, 3.4vw, 38px); margin-bottom: 28px; }
.icerik-dar .kart { margin-bottom: 16px; }
.icerik-dar .kart h2 { font-size: 19px; margin-bottom: 8px; }
.icerik-dar .kart p, .icerik-dar .kart li { color: var(--soluk); font-size: 15px; }
.icerik-dar ul { padding-left: 22px; }
.icerik-dar li { margin: 6px 0; }

/* Guven sayfasi */
.sayfa-ust { margin-bottom: 26px; }
.sayfa-ust h1 { margin-bottom: 12px; }
.sayfa-ust p { color: var(--soluk); font-size: 15.5px; max-width: 62ch; }

.taahhut-liste { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 26px; }
.taahhut-satir { display: flex; gap: 14px; align-items: flex-start; padding: 20px 22px; margin-bottom: 0 !important; }
.taahhut-satir .tik-yuvarlak {
    flex: none; width: 32px; height: 32px; border-radius: 50%;
    background: var(--yesil-acik); color: var(--yesil);
    display: inline-flex; align-items: center; justify-content: center;
    margin-top: 1px;
}
.taahhut-satir h3 { font-size: 15.5px; margin-bottom: 5px; }
.taahhut-satir p { font-size: 13.8px; color: var(--soluk); line-height: 1.55; }

.uyari-kart { border-color: #f3c9c4; background: #fffaf9; }
.uyari-kart h2 { color: var(--kirmizi); }
.uyari-kart p + p { margin-top: 10px; }

@media (max-width: 720px) { .taahhut-liste { grid-template-columns: 1fr; } }

/* ================= LPANEL ================= */
.lpanel-govde { background: var(--zemin-acik); }
.lpanel-bar { background: var(--lacivert-1); position: sticky; top: 0; z-index: 90; }
.lpanel-bar-ic { display: flex; align-items: center; justify-content: space-between; gap: 18px; height: 58px; }
.lpanel-logo { color: #fff; font-weight: 800; font-size: 17px; text-decoration: none; letter-spacing: -0.02em; }
.lpanel-logo b { color: var(--mavi); }
.lpanel-logo span { font-weight: 600; font-size: 12px; color: #8fa3c2; margin-left: 4px; }
.lpanel-nav { display: flex; gap: 2px; flex-wrap: wrap; }
.lpanel-nav a {
    color: #c3cfe2; font-weight: 600; font-size: 13.5px;
    padding: 7px 12px; border-radius: 9px; text-decoration: none;
}
.lpanel-nav a:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.lpanel-sayac { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 18px; }
.lpanel-sayac .kart { padding: 16px 18px; }
.lpanel-sayac .deger { font-size: 26px; font-weight: 800; color: var(--koyu-metin); font-variant-numeric: tabular-nums; }
.lpanel-sayac .deger.dolu { color: var(--mavi-koyu); }
.lpanel-sayac .ad { font-size: 12.5px; color: var(--soluk); font-weight: 600; }
@media (max-width: 900px) { .lpanel-sayac { grid-template-columns: 1fr 1fr; } }

/* Kopyalanabilir komut kutusu (cron ekrani) */
.kod-kutu {
    display: flex; align-items: center; gap: 10px;
    background: var(--zemin-acik); border: 1px solid var(--cizgi);
    border-radius: 10px; padding: 12px 14px;
}
.kod-kutu code {
    flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px; color: var(--koyu-metin); padding-bottom: 2px;
}
.kod-kutu .btn { min-height: 36px; padding: 0 14px; font-size: 13px; white-space: nowrap; }
@media (max-width: 700px) { .kod-kutu { flex-direction: column; align-items: stretch; } }

/* ================= MOBIL ================= */
@media (max-width: 960px) {
    .hero-ic { grid-template-columns: 1fr; gap: 44px; padding-top: 48px; padding-bottom: 76px; }
    .hero-band { margin-top: -34px; }
    .hero-gorsel { min-height: 380px; }
    .hero-band-ic { grid-template-columns: 1fr 1fr; }
    .band-kart:nth-child(2n) { border-right: 0; }
    .band-kart:nth-child(-n+2) { border-bottom: 1px solid var(--cizgi); }
    .ozellik-izgara { grid-template-columns: 1fr 1fr; }
    .taahhut-izgara { grid-template-columns: 1fr 1fr; }
    .b2b-ic { grid-template-columns: 1fr; gap: 38px; }
    .panel-izgara { grid-template-columns: 1fr; }
    .footer-izgara { grid-template-columns: 1fr 1fr; }
    .gorev-liste-baslik { display: none; }
    .gorev-satir { grid-template-columns: 1fr auto; gap: 6px 14px; }
    .gorev-satir .no, .gorev-satir .kontenjan { display: none; }
    .gorev-satir .kategori { grid-column: 1 / -1; }
    .gorev-satir .git { grid-column: 1 / -1; text-align: left; }
}
@media (max-width: 620px) {
    .gizle-mobil { display: none; }
    .ozellik-izgara, .taahhut-izgara { grid-template-columns: 1fr; }
    .hero-statlar { gap: 26px; }
    .bolum { padding: 56px 0; }
    .koyu-bant { padding: 38px 24px; }
    .hero-cta .btn { flex: 1; }
    .footer-izgara { grid-template-columns: 1fr; gap: 26px; }
    .hero-band-ic { grid-template-columns: 1fr; }
    .band-kart { border-right: 0; border-bottom: 1px solid var(--cizgi); }
    .band-kart:last-child { border-bottom: 0; }
    .panel-mock { right: 0; }
    .bildirim-mock { position: static; margin-top: 14px; }
    .hero-gorsel { min-height: 0; display: flex; flex-direction: column; }
    .panel-mock { position: static; }
}

/* Dar telefonlarda ust bar tasmasin (375 px'te buton sagdan cikiyordu) */
@media (max-width: 430px) {
    .ustbar-ic { gap: 8px; }
    .ustbar nav { gap: 0; }
    .ustbar nav a:not(.btn) { padding: 8px 8px; font-size: 14px; }
    .ustbar .btn { margin-left: 4px; padding: 0 16px; font-size: 14px; }
    .logo { font-size: 19px; }
}