/* ============================================================
   PADOK Bulut — Eğitim Merkezi
   Site design system'ini (css/styles.css) genisletir.
   Ekran ve baski (PDF) duzenini birlikte tasir.
   ============================================================ */

:root {
    --egitim-adim: var(--accent-orange);
    --egitim-not-bg: #F0F9FF;
    --egitim-not-border: #38BDF8;
    --egitim-uyari-bg: #FFF7ED;
    --egitim-uyari-border: var(--accent-orange);
    --egitim-ipucu-bg: #F0FDF4;
    --egitim-ipucu-border: var(--success);
}

/* ---------- Sayfa ust bandi ---------- */
.egitim-hero {
    background: linear-gradient(135deg, var(--hero-bg-start) 0%, var(--hero-bg-mid) 55%, var(--hero-bg-end) 100%);
    color: #fff;
    padding: 120px 0 56px;
}

.egitim-hero .kirinti {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 14px;
}

.egitim-hero .kirinti a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
}

.egitim-hero .kirinti a:hover {
    text-decoration: underline;
}

.egitim-hero h1 {
    font-size: clamp(1.9rem, 4vw, 2.9rem);
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 16px;
}

.egitim-hero .ozet {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.85);
    max-width: 720px;
}

.egitim-hero .rozetler {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.egitim-hero .rozet {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--radius-full);
    padding: 7px 15px;
    font-size: 0.82rem;
    font-weight: 500;
}

.egitim-hero .pdf-indir {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 26px;
    background: var(--accent-orange);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 13px 26px;
    border-radius: var(--radius-md);
    transition: background var(--transition);
}

.egitim-hero .pdf-indir:hover {
    background: var(--accent-orange-dark);
}

/* ---------- Govde ---------- */
.egitim-govde {
    padding: 56px 0 80px;
}

.egitim-duzen {
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: 56px;
    align-items: start;
}

.egitim-icerik>p {
    margin-bottom: 18px;
    color: var(--text-secondary);
}

.egitim-icerik h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 44px 0 16px;
    color: var(--text-primary);
}

.egitim-icerik h2:first-child {
    margin-top: 0;
}

/* ---------- Adim blogu ---------- */
.adim {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
    padding: 28px 30px;
    margin-bottom: 30px;
}

.adim-baslik {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 16px;
}

.adim-no {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background: var(--egitim-adim);
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.adim-baslik h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.35;
    padding-top: 5px;
}

.adim p {
    color: var(--text-secondary);
    margin-bottom: 14px;
}

.adim ul {
    margin: 0 0 14px 0;
    padding-left: 0;
    list-style: none;
}

.adim ul li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 9px;
    color: var(--text-secondary);
}

.adim ul li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 10px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary-active);
}

/* Ekranda gorunen etiket ve buton adlari */
.ui {
    background: var(--bg-section);
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 1px 7px;
    font-size: 0.9em;
    font-weight: 600;
    color: var(--primary);
    white-space: nowrap;
}

/* ---------- Ekran goruntusu ---------- */
figure.ekran {
    margin: 20px 0 6px;
}

/* Gorsel, kendi tam boy dosyasina baglidir: telefonda ekran goruntusu
   ~265px'e dusuyor ve icindeki yazilar okunmuyor, dokununca tam boy acilir. */
figure.ekran a.ekran-buyut {
    display: block;
    position: relative;
}

figure.ekran img {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    transition: border-color var(--transition);
}

figure.ekran a.ekran-buyut:hover img {
    border-color: var(--primary-active);
}

/* Buyutme ipucu — yalniz dokunmatik olmayan genis ekranlarda */
@media (hover: hover) and (min-width: 901px) {
    figure.ekran a.ekran-buyut::after {
        content: "\f00e";
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        position: absolute;
        top: 10px;
        right: 10px;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius-sm);
        background: rgba(15, 23, 42, 0.72);
        color: #fff;
        font-size: 0.82rem;
        opacity: 0;
        transition: opacity var(--transition);
        pointer-events: none;
    }

    figure.ekran a.ekran-buyut:hover::after {
        opacity: 1;
    }
}

figure.ekran figcaption {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-top: 9px;
    text-align: center;
}

/* ---------- Kutular ---------- */
.kutu {
    border-left: 4px solid var(--egitim-not-border);
    background: var(--egitim-not-bg);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: 15px 18px;
    margin: 16px 0;
}

.kutu p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.94rem;
}

.kutu p+p {
    margin-top: 8px;
}

.kutu .kutu-baslik {
    display: block;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 6px;
}

.kutu.uyari {
    border-left-color: var(--egitim-uyari-border);
    background: var(--egitim-uyari-bg);
}

.kutu.uyari .kutu-baslik {
    color: var(--accent-orange-dark);
}

.kutu.ipucu {
    border-left-color: var(--egitim-ipucu-border);
    background: var(--egitim-ipucu-bg);
}

.kutu.ipucu .kutu-baslik {
    color: var(--success-dark);
}

/* ---------- SSS ---------- */
.sss-ogesi {
    border-bottom: 1px solid var(--border);
    padding: 16px 0;
}

.sss-ogesi:last-child {
    border-bottom: none;
}

.sss-ogesi h3 {
    font-size: 1rem;
    font-weight: 650;
    color: var(--text-primary);
    margin-bottom: 7px;
}

.sss-ogesi p {
    color: var(--text-secondary);
    font-size: 0.94rem;
    margin: 0;
}

/* ---------- Yan sutun ---------- */
.egitim-yan {
    position: sticky;
    top: 100px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-section);
    padding: 22px;
}

.egitim-yan h4 {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 14px;
}

.egitim-yan ol {
    list-style: none;
    counter-reset: y;
    padding: 0;
    margin: 0 0 20px;
}

.egitim-yan ol li {
    counter-increment: y;
    margin-bottom: 10px;
}

.egitim-yan ol li a {
    display: flex;
    gap: 9px;
    font-size: 0.88rem;
    color: var(--text-secondary);
    text-decoration: none;
    line-height: 1.4;
}

.egitim-yan ol li a::before {
    content: counter(y) ".";
    color: var(--egitim-adim);
    font-weight: 700;
    flex-shrink: 0;
}

.egitim-yan ol li a:hover {
    color: var(--primary-active);
}

.egitim-yan .yan-pdf {
    display: block;
    text-align: center;
    background: var(--primary);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.88rem;
    padding: 11px;
    border-radius: var(--radius-md);
    transition: background var(--transition);
}

.egitim-yan .yan-pdf:hover {
    background: var(--primary-active);
}

/* ---------- Rehber listesi (egitim/index.html) ---------- */
.rehber-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 22px;
}

.rehber-kart {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    padding: 26px;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

a.rehber-kart:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-active);
}

.rehber-kart .etiket {
    align-self: flex-start;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--primary-active);
    background: var(--egitim-not-bg);
    border-radius: var(--radius-full);
    padding: 5px 11px;
    margin-bottom: 14px;
}

.rehber-kart h3 {
    font-size: 1.12rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 9px;
    line-height: 1.35;
}

.rehber-kart p {
    font-size: 0.92rem;
    color: var(--text-secondary);
    margin-bottom: 16px;
    flex-grow: 1;
}

.rehber-kart .alt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.rehber-kart .alt .oku {
    color: var(--primary-active);
    font-weight: 600;
}

.rehber-kart.hazirlaniyor {
    opacity: 0.62;
    box-shadow: none;
}

.rehber-kart.hazirlaniyor .etiket {
    color: var(--text-muted);
    background: var(--border-light);
}

.bolum-basligi {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 52px 0 20px;
}

.bolum-basligi:first-of-type {
    margin-top: 0;
}

/* ---------- Duyarli ---------- */
@media (max-width: 900px) {
    .egitim-duzen {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .egitim-yan {
        position: static;
        order: -1;
    }

    .egitim-hero {
        padding: 100px 0 44px;
    }
}

/* ============================================================
   BASKI / PDF
   Ayni HTML'den Chrome --print-to-pdf ile uretilir.
   Site kabugu (menu, footer, yan sutun) baskida gizlenir.
   ============================================================ */
@page {
    size: A4;
    margin: 18mm 15mm 20mm;
}

/* Baskiya ozel marka satiri — ekranda gizli */
.baski-basligi {
    display: none;
}

@media print {

    .header,
    .footer,
    .egitim-yan,
    .hamburger,
    .modal-overlay,
    .pdf-indir,
    .baskida-gizle {
        display: none !important;
    }

    html,
    body {
        background: #fff !important;
        color: #000;
        font-size: 10.5pt;
    }

    .egitim-hero {
        background: none !important;
        color: #000;
        padding: 0 0 18px;
        border-bottom: 3px solid var(--primary);
        margin-bottom: 24px;
    }

    .egitim-hero h1 {
        font-size: 21pt;
        color: var(--primary-dark);
    }

    .egitim-hero .ozet {
        color: #333;
        font-size: 11pt;
    }

    .egitim-hero .kirinti,
    .egitim-hero .kirinti a {
        color: #666;
    }

    .egitim-hero .rozet {
        background: #f1f5f9 !important;
        border-color: #cbd5e1;
        color: #334155;
    }

    .baski-basligi {
        display: flex !important;
        align-items: baseline;
        justify-content: space-between;
        border-bottom: 1px solid #cbd5e1;
        padding-bottom: 7px;
        margin-bottom: 16px;
        font-size: 9pt;
        color: #475569;
    }

    .baski-basligi strong {
        color: var(--primary-dark);
        font-size: 11pt;
        letter-spacing: 0.5px;
    }

    .egitim-govde {
        padding: 0;
    }

    .egitim-duzen {
        display: block;
    }

    .container {
        max-width: none;
        padding: 0;
    }

    /* Adim kartinin sayfa sonunda bolunmesine izin verilir. Butun tutulursa
       Chrome her karti ayri sayfaya atiyor ve sayfalarin alt yarisi bos
       kaliyor (7 sayfa -> 5 sayfa farki). Bolunme riskli degil, cunku
       icindeki gorsel ve kutular kendi icinde butun kaliyor ve adim basligi
       hicbir zaman tek basina sayfa sonunda birakilmiyor. */
    .adim {
        box-shadow: none;
        border: 1px solid #cbd5e1;
        padding: 14px 16px;
        margin-bottom: 16px;
    }

    .adim-baslik {
        break-after: avoid;
        page-break-after: avoid;
    }

    .adim-baslik h3 {
        font-size: 12.5pt;
    }

    .adim-no {
        width: 26px;
        height: 26px;
        font-size: 10pt;
    }

    figure.ekran,
    .kutu,
    .sss-ogesi {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* Ekran goruntulerine bir yukseklik tavani konur; boylece cok uzun bir
       gorsel tek basina sayfa doldurmaz. 100mm pratikte "tam sutun genisligi,
       ama 100mm'den uzun olmasin" demek: kirpilmis genis gorseller genislige
       gore sinirlanir, tam boy modal ekranlari da okunur kalir.
       Daha dusuk bir tavan (62mm) sayfa sayisini 8'den 6'ya indiriyordu ama
       modal ekranlarindaki yazilar basimda okunmaz hale geliyordu. */
    figure.ekran {
        text-align: center;
        margin: 12px 0 4px;
    }

    figure.ekran img {
        box-shadow: none;
        border: 1px solid #cbd5e1;
        width: auto;
        max-width: 100%;
        max-height: 100mm;
        margin: 0 auto;
    }

    .egitim-icerik h2 {
        break-after: avoid;
        page-break-after: avoid;
        font-size: 14pt;
    }

    a {
        color: inherit;
        text-decoration: none;
    }
}