/* =========================================================================
   💥 ETDS PORTAL — ACENTE PANELİ TASARIM SİSTEMİ (pn-*) 💥
   Tüm acente sayfaları bu ortak bileşenleri kullanır; böylece panel baştan sona aynı görünür.
   İlkeler:
   - Göz yormayan yumuşak zemin, düşük kontrastlı kenarlar, sade gölgeler.
   - Okunaklı yazı: gövde metni saf siyah değil koyu arduvaz; başlıklar yarı kalın.
   - Tek vurgu rengi (mavi); durum renkleri yalnızca anlam taşıdığında.
   - Açık ve koyu tema aynı değişkenlerle çalışır (html.dark-mode).
   - Dokunmatik ekranlarda en az 40px dokunma alanı.
   ========================================================================= */

:root {
    /* Zemin ve yüzeyler */
    --pn-zemin: #f4f6f9;
    --pn-yuzey: #ffffff;
    --pn-yuzey-2: #f8fafc;
    --pn-yuzey-3: #eef2f7;
    --pn-kenar: #e3e8ef;
    --pn-kenar-2: #d0d7e2;

    /* Yazı */
    --pn-metin: #1e2939;
    --pn-metin-2: #4b5669;
    --pn-metin-3: #7a8497;
    --pn-metin-ters: #ffffff;

    /* Vurgu */
    --pn-vurgu: #2563eb;
    --pn-vurgu-koyu: #1d4ed8;
    --pn-vurgu-ton: #eef4ff;
    --pn-vurgu-ton-2: #dbe7ff;
    --pn-vurgu-metin: #1d4ed8;

    /* Durum renkleri (metin / zemin / kenar) */
    --pn-yesil: #15803d;
    --pn-yesil-ton: #ecfdf3;
    --pn-yesil-kenar: #bbf0cf;
    --pn-sari: #b45309;
    --pn-sari-ton: #fff8eb;
    --pn-sari-kenar: #fde2b0;
    --pn-kirmizi: #c62828;
    --pn-kirmizi-ton: #fef3f2;
    --pn-kirmizi-kenar: #fbd0cc;
    --pn-mor: #6d28d9;
    --pn-mor-ton: #f4f0ff;
    --pn-mor-kenar: #ddd3fb;
    --pn-gri: #5b6576;
    --pn-gri-ton: #f1f4f8;
    --pn-gri-kenar: #dde3eb;
    --pn-camgobegi: #0e7490;
    --pn-camgobegi-ton: #ecfbff;

    /* Biçim */
    --pn-yaricap: 14px;
    --pn-yaricap-k: 10px;
    --pn-golge: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.04);
    --pn-golge-2: 0 10px 30px -12px rgba(16, 24, 40, 0.18);
    --pn-odak: 0 0 0 3px rgba(37, 99, 235, 0.18);
    --pn-yazi: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --pn-gecis: 160ms ease;
}

html.dark-mode {
    --pn-zemin: #0f1623;
    --pn-yuzey: #172131;
    --pn-yuzey-2: #1b2638;
    --pn-yuzey-3: #223047;
    --pn-kenar: #263349;
    --pn-kenar-2: #33435e;

    --pn-metin: #e6ebf2;
    --pn-metin-2: #b3bdcc;
    --pn-metin-3: #8591a5;

    --pn-vurgu: #3b82f6;
    --pn-vurgu-koyu: #2563eb;
    --pn-vurgu-ton: rgba(59, 130, 246, 0.14);
    --pn-vurgu-ton-2: rgba(59, 130, 246, 0.24);
    --pn-vurgu-metin: #8ab4ff;

    --pn-yesil: #4ade80;
    --pn-yesil-ton: rgba(34, 197, 94, 0.12);
    --pn-yesil-kenar: rgba(74, 222, 128, 0.28);
    --pn-sari: #fbbf24;
    --pn-sari-ton: rgba(245, 158, 11, 0.12);
    --pn-sari-kenar: rgba(251, 191, 36, 0.3);
    --pn-kirmizi: #f87171;
    --pn-kirmizi-ton: rgba(239, 68, 68, 0.12);
    --pn-kirmizi-kenar: rgba(248, 113, 113, 0.3);
    --pn-mor: #c4b5fd;
    --pn-mor-ton: rgba(139, 92, 246, 0.14);
    --pn-mor-kenar: rgba(167, 139, 250, 0.3);
    --pn-gri: #a3aec0;
    --pn-gri-ton: rgba(148, 163, 184, 0.12);
    --pn-gri-kenar: rgba(148, 163, 184, 0.24);
    --pn-camgobegi: #67e8f9;
    --pn-camgobegi-ton: rgba(6, 182, 212, 0.12);

    --pn-golge: 0 1px 2px rgba(0, 0, 0, 0.25);
    --pn-golge-2: 0 16px 40px -12px rgba(0, 0, 0, 0.55);
    --pn-odak: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

/* ------------------------------------------------------------------ SAYFA */
.pn-sayfa {
    font-family: var(--pn-yazi);
    color: var(--pn-metin);
    font-size: 0.925rem;
    line-height: 1.5;
    max-width: 1360px;
    margin: 0 auto;
    padding-bottom: 2rem;
    animation: pn-belir 220ms ease-out;
}

    .pn-sayfa *, .pn-pencere * {
        box-sizing: border-box;
    }

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

.pn-sayfa-bas {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.pn-sayfa-bas > :first-child {
    flex: 1 1 220px;
    min-width: 0;
}

.pn-baslik {
    font-size: 1.4rem;
    font-weight: 650;
    letter-spacing: -0.015em;
    color: var(--pn-metin);
    margin: 0;
    line-height: 1.25;
}

.pn-alt-baslik {
    color: var(--pn-metin-3);
    font-size: 0.9rem;
    margin: 0.25rem 0 0;
}

.pn-bas-eylemler {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.pn-bolum-baslik {
    font-size: 0.78rem;
    font-weight: 650;
    color: var(--pn-metin-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 1.5rem 0 0.75rem;
}

/* ------------------------------------------------------------------ IZGARA / YIĞIN */
.pn-izgara {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.pn-izgara-2 { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pn-izgara-3 { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pn-izgara-4 { display: grid; gap: 1rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pn-izgara-ana { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); align-items: start; }

@media (max-width: 1199.98px) {
    .pn-izgara-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pn-izgara-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pn-izgara-ana { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767.98px) {
    .pn-izgara-2, .pn-izgara-3 { grid-template-columns: minmax(0, 1fr); }
}

.pn-yigin { display: flex; flex-direction: column; gap: 1rem; }
.pn-yigin-k { display: flex; flex-direction: column; gap: 0.5rem; }
.pn-satir { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.pn-satir-arasi { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.pn-esnek { flex: 1 1 auto; min-width: 0; }

/* ------------------------------------------------------------------ KART */
.pn-kart {
    background: var(--pn-yuzey);
    border: 1px solid var(--pn-kenar);
    border-radius: var(--pn-yaricap);
    box-shadow: var(--pn-golge);
    min-width: 0;
}

.pn-kart-bas {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--pn-kenar);
    flex-wrap: wrap;
}

.pn-kart-bas > :first-child {
    flex: 1 1 180px;
    min-width: 0;
}

.pn-kart-baslik {
    font-size: 1rem;
    font-weight: 620;
    margin: 0;
    color: var(--pn-metin);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .pn-kart-baslik > i {
        color: var(--pn-metin-3);
        font-size: 1.05rem;
    }

.pn-kart-aciklama {
    font-size: 0.82rem;
    color: var(--pn-metin-3);
    margin: 0.15rem 0 0;
}

.pn-kart-govde { padding: 1.25rem; }
.pn-kart-govde.sikisik { padding: 0.5rem 0; }

.pn-kart-alt {
    padding: 0.85rem 1.25rem;
    border-top: 1px solid var(--pn-kenar);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.pn-kart.tiklanir {
    cursor: pointer;
    transition: border-color var(--pn-gecis), box-shadow var(--pn-gecis), transform var(--pn-gecis);
}

    .pn-kart.tiklanir:hover {
        border-color: var(--pn-kenar-2);
        box-shadow: var(--pn-golge-2);
    }

    .pn-kart.tiklanir:active { transform: scale(0.995); }

/* ------------------------------------------------------------------ ÖZET (KPI) */
.pn-ozet {
    background: var(--pn-yuzey);
    border: 1px solid var(--pn-kenar);
    border-radius: var(--pn-yaricap);
    box-shadow: var(--pn-golge);
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.pn-ozet-ust { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }

.pn-ozet-etiket {
    font-size: 0.8rem;
    color: var(--pn-metin-3);
    font-weight: 550;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pn-ozet-deger {
    font-size: 1.55rem;
    font-weight: 650;
    letter-spacing: -0.02em;
    color: var(--pn-metin);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .pn-ozet-deger small {
        font-size: 0.8rem;
        font-weight: 500;
        color: var(--pn-metin-3);
        margin-left: 0.2rem;
    }

.pn-ozet-alt {
    font-size: 0.78rem;
    color: var(--pn-metin-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 575.98px) {
    .pn-ozet { padding: 0.85rem 0.9rem; }
    .pn-ozet-ust .pn-ikon-kutu { display: none; }
    .pn-ozet-etiket, .pn-ozet-alt { white-space: normal; }
    .pn-ozet-deger { font-size: 1.35rem; }
    .pn-baslik { font-size: 1.25rem; }
    .pn-kart-bas, .pn-kart-govde { padding-left: 1rem; padding-right: 1rem; }
    .pn-liste-oge { padding-left: 1rem; padding-right: 1rem; }
}

.pn-ikon-kutu {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.02rem;
    flex-shrink: 0;
    background: var(--pn-vurgu-ton);
    color: var(--pn-vurgu-metin);
}

    .pn-ikon-kutu.yesil { background: var(--pn-yesil-ton); color: var(--pn-yesil); }
    .pn-ikon-kutu.sari { background: var(--pn-sari-ton); color: var(--pn-sari); }
    .pn-ikon-kutu.kirmizi { background: var(--pn-kirmizi-ton); color: var(--pn-kirmizi); }
    .pn-ikon-kutu.mor { background: var(--pn-mor-ton); color: var(--pn-mor); }
    .pn-ikon-kutu.gri { background: var(--pn-gri-ton); color: var(--pn-gri); }
    .pn-ikon-kutu.buyuk { width: 44px; height: 44px; font-size: 1.25rem; border-radius: 12px; }

/* ------------------------------------------------------------------ DÜĞMELER */
.pn-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 40px;
    padding: 0 1rem;
    border-radius: var(--pn-yaricap-k);
    border: 1px solid var(--pn-kenar-2);
    background: var(--pn-yuzey);
    color: var(--pn-metin);
    font-family: var(--pn-yazi);
    font-size: 0.9rem;
    font-weight: 560;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    user-select: none;
    transition: background var(--pn-gecis), border-color var(--pn-gecis), color var(--pn-gecis), box-shadow var(--pn-gecis), transform 80ms ease;
}

    .pn-btn:hover:not(:disabled) { background: var(--pn-yuzey-2); border-color: var(--pn-kenar-2); color: var(--pn-metin); }
    .pn-btn:active:not(:disabled) { transform: scale(0.98); }
    .pn-btn:focus-visible { outline: none; box-shadow: var(--pn-odak); }
    .pn-btn:disabled { opacity: 0.55; cursor: not-allowed; }
    .pn-btn > i { font-size: 1.02em; }

.pn-btn-birincil { background: var(--pn-vurgu); border-color: var(--pn-vurgu); color: #fff; }
    .pn-btn-birincil:hover:not(:disabled) { background: var(--pn-vurgu-koyu); border-color: var(--pn-vurgu-koyu); color: #fff; }

.pn-btn-yumusak { background: var(--pn-vurgu-ton); border-color: transparent; color: var(--pn-vurgu-metin); }
    .pn-btn-yumusak:hover:not(:disabled) { background: var(--pn-vurgu-ton-2); border-color: transparent; color: var(--pn-vurgu-metin); }

.pn-btn-hayalet { background: transparent; border-color: transparent; color: var(--pn-metin-2); }
    .pn-btn-hayalet:hover:not(:disabled) { background: var(--pn-yuzey-3); border-color: transparent; color: var(--pn-metin); }

.pn-btn-tehlike { background: var(--pn-yuzey); border-color: var(--pn-kirmizi-kenar); color: var(--pn-kirmizi); }
    .pn-btn-tehlike:hover:not(:disabled) { background: var(--pn-kirmizi-ton); border-color: var(--pn-kirmizi-kenar); color: var(--pn-kirmizi); }

.pn-btn-tehlike-dolu { background: #dc2626; border-color: #dc2626; color: #fff; }
    .pn-btn-tehlike-dolu:hover:not(:disabled) { background: #b91c1c; border-color: #b91c1c; color: #fff; }

.pn-btn-basari { background: #16a34a; border-color: #16a34a; color: #fff; }
    .pn-btn-basari:hover:not(:disabled) { background: #15803d; border-color: #15803d; color: #fff; }

.pn-btn-kucuk { min-height: 32px; padding: 0 0.7rem; font-size: 0.82rem; border-radius: 8px; }
.pn-btn-buyuk { min-height: 46px; padding: 0 1.3rem; font-size: 0.95rem; }
.pn-btn-blok { width: 100%; }
.pn-btn-ikon { width: 40px; padding: 0; }
    .pn-btn-ikon.pn-btn-kucuk { width: 32px; }

.pn-donen {
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    display: inline-block;
    animation: pn-don 0.7s linear infinite;
    flex-shrink: 0;
}

@keyframes pn-don { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------ FORM */
.pn-alan { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }

.pn-etiket {
    font-size: 0.82rem;
    font-weight: 580;
    color: var(--pn-metin-2);
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
}

    .pn-etiket .zorunlu { color: var(--pn-kirmizi); }

.pn-girdi {
    width: 100%;
    min-height: 42px;
    padding: 0.55rem 0.8rem;
    border-radius: var(--pn-yaricap-k);
    border: 1px solid var(--pn-kenar-2);
    background: var(--pn-yuzey);
    color: var(--pn-metin);
    font-family: var(--pn-yazi);
    font-size: 0.925rem;
    line-height: 1.35;
    outline: none;
    transition: border-color var(--pn-gecis), box-shadow var(--pn-gecis), background var(--pn-gecis);
    -webkit-appearance: none;
    appearance: none;
}

    .pn-girdi::placeholder { color: var(--pn-metin-3); opacity: 0.85; }
    .pn-girdi:focus { border-color: var(--pn-vurgu); box-shadow: var(--pn-odak); }
    .pn-girdi:disabled { background: var(--pn-yuzey-3); color: var(--pn-metin-3); cursor: not-allowed; }
    .pn-girdi.hatali { border-color: var(--pn-kirmizi); }

textarea.pn-girdi { min-height: 90px; resize: vertical; }

select.pn-girdi {
    padding-right: 2.2rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%237a8497' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 14px 10px;
}

.pn-girdi-grup { position: relative; display: flex; align-items: center; }

    .pn-girdi-grup > i {
        position: absolute;
        left: 0.8rem;
        color: var(--pn-metin-3);
        pointer-events: none;
        font-size: 0.95rem;
    }

    .pn-girdi-grup > .pn-girdi { padding-left: 2.3rem; }

    .pn-girdi-grup > .pn-girdi-son {
        position: absolute;
        right: 0.35rem;
        display: inline-flex;
        align-items: center;
    }

.pn-ipucu { font-size: 0.78rem; color: var(--pn-metin-3); margin: 0; }
.pn-hata-metni { font-size: 0.78rem; color: var(--pn-kirmizi); margin: 0; }

.pn-form-izgara {
    display: grid;
    gap: 0.9rem 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

    .pn-form-izgara .tam { grid-column: 1 / -1; }

@media (max-width: 575.98px) {
    .pn-form-izgara { grid-template-columns: minmax(0, 1fr); }
    .pn-girdi { font-size: 16px; } /* iOS yakınlaştırmasın */
}

/* Onay kutusu / seçim */
.pn-onay {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--pn-metin);
    user-select: none;
}

    .pn-onay input {
        width: 18px;
        height: 18px;
        accent-color: var(--pn-vurgu);
        cursor: pointer;
        margin: 0;
    }

/* Aç / kapa anahtarı */
.pn-anahtar {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 26px;
    flex-shrink: 0;
    cursor: pointer;
}

    .pn-anahtar input {
        position: absolute;
        opacity: 0;
        width: 100%;
        height: 100%;
        margin: 0;
        cursor: pointer;
        z-index: 1;
    }

    .pn-anahtar span {
        position: absolute;
        inset: 0;
        border-radius: 999px;
        background: var(--pn-kenar-2);
        transition: background var(--pn-gecis);
    }

        .pn-anahtar span::after {
            content: "";
            position: absolute;
            top: 3px;
            left: 3px;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #fff;
            box-shadow: 0 1px 3px rgba(16, 24, 40, 0.25);
            transition: transform 200ms cubic-bezier(0.34, 1.4, 0.64, 1);
        }

    .pn-anahtar input:checked + span { background: var(--pn-vurgu); }
    .pn-anahtar input:checked + span::after { transform: translateX(18px); }
    .pn-anahtar input:focus-visible + span { box-shadow: var(--pn-odak); }
    .pn-anahtar input:disabled + span { opacity: 0.5; }

/* ------------------------------------------------------------------ ARAÇ ÇUBUĞU / ARAMA / SEKME / ÇİP */
.pn-arac-cubugu {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.pn-arama { position: relative; flex: 1 1 260px; min-width: 200px; max-width: 420px; }

    .pn-arama > i {
        position: absolute;
        left: 0.8rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--pn-metin-3);
        pointer-events: none;
    }

    .pn-arama > .pn-girdi { padding-left: 2.3rem; }

.pn-sekmeler {
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.25rem;
    background: var(--pn-yuzey-3);
    border-radius: 12px;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}

    .pn-sekmeler::-webkit-scrollbar { display: none; }

.pn-sekme {
    border: none;
    background: transparent;
    color: var(--pn-metin-2);
    font-family: var(--pn-yazi);
    font-size: 0.86rem;
    font-weight: 560;
    min-height: 34px;
    padding: 0 0.85rem;
    border-radius: 9px;
    white-space: nowrap;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: background var(--pn-gecis), color var(--pn-gecis);
}

    .pn-sekme:hover { color: var(--pn-metin); }

    .pn-sekme.aktif {
        background: var(--pn-yuzey);
        color: var(--pn-metin);
        box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
    }

.pn-sayac {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--pn-yuzey-3);
    color: var(--pn-metin-2);
    font-size: 0.72rem;
    font-weight: 650;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-variant-numeric: tabular-nums;
}

.pn-sekme.aktif .pn-sayac { background: var(--pn-vurgu-ton); color: var(--pn-vurgu-metin); }
.pn-sayac.kirmizi { background: #ef4444; color: #fff; }

.pn-cip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 32px;
    padding: 0 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--pn-kenar-2);
    background: var(--pn-yuzey);
    color: var(--pn-metin-2);
    font-size: 0.82rem;
    font-weight: 540;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--pn-gecis);
}

    .pn-cip:hover { color: var(--pn-metin); border-color: var(--pn-metin-3); }
    .pn-cip.aktif { background: var(--pn-vurgu-ton); border-color: transparent; color: var(--pn-vurgu-metin); }

/* ------------------------------------------------------------------ ROZET */
.pn-rozet {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    height: 24px;
    padding: 0 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    background: var(--pn-gri-ton);
    color: var(--pn-gri);
    border: 1px solid transparent;
}

    .pn-rozet > i { font-size: 0.8rem; }
    .pn-rozet.yesil { background: var(--pn-yesil-ton); color: var(--pn-yesil); }
    .pn-rozet.sari { background: var(--pn-sari-ton); color: var(--pn-sari); }
    .pn-rozet.kirmizi { background: var(--pn-kirmizi-ton); color: var(--pn-kirmizi); }
    .pn-rozet.mavi { background: var(--pn-vurgu-ton); color: var(--pn-vurgu-metin); }
    .pn-rozet.mor { background: var(--pn-mor-ton); color: var(--pn-mor); }
    .pn-rozet.camgobegi { background: var(--pn-camgobegi-ton); color: var(--pn-camgobegi); }
    .pn-rozet.nokta::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ------------------------------------------------------------------ TABLO */
.pn-tablo-kap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.pn-tablo {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.89rem;
}

    .pn-tablo th {
        text-align: left;
        font-size: 0.76rem;
        font-weight: 600;
        color: var(--pn-metin-3);
        padding: 0.65rem 1rem;
        background: var(--pn-yuzey-2);
        border-bottom: 1px solid var(--pn-kenar);
        white-space: nowrap;
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .pn-tablo td {
        padding: 0.75rem 1rem;
        border-bottom: 1px solid var(--pn-kenar);
        color: var(--pn-metin);
        vertical-align: middle;
    }

    .pn-tablo tbody tr:last-child td { border-bottom: none; }
    .pn-tablo tbody tr { transition: background var(--pn-gecis); }
    .pn-tablo tbody tr:hover td { background: var(--pn-yuzey-2); }
    .pn-tablo tr.tiklanir { cursor: pointer; }
    .pn-tablo .sag { text-align: right; }
    .pn-tablo .orta { text-align: center; }
    .pn-tablo .dar { width: 1%; white-space: nowrap; }
    .pn-tablo .sayi { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ------------------------------------------------------------------ LİSTE (mobil ve sade listeler) */
.pn-liste { display: flex; flex-direction: column; }

.pn-liste-oge {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid var(--pn-kenar);
    min-width: 0;
    background: transparent;
    width: 100%;
    text-align: left;
    color: inherit;
    font: inherit;
    border-left: none;
    border-right: none;
    border-top: none;
}

    .pn-liste-oge:last-child { border-bottom: none; }
    .pn-liste-oge.tiklanir { cursor: pointer; transition: background var(--pn-gecis); }
    .pn-liste-oge.tiklanir:hover { background: var(--pn-yuzey-2); }

.pn-liste-baslik {
    display: block;
    font-weight: 600;
    color: var(--pn-metin);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.92rem;
}

.pn-liste-alt {
    display: block;
    font-size: 0.8rem;
    color: var(--pn-metin-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ------------------------------------------------------------------ BOŞ / UYARI / İSKELET */
.pn-bos {
    text-align: center;
    padding: 2.5rem 1.25rem;
    color: var(--pn-metin-3);
}

    .pn-bos .pn-bos-ikon {
        width: 56px;
        height: 56px;
        border-radius: 16px;
        background: var(--pn-yuzey-3);
        color: var(--pn-metin-3);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        margin-bottom: 0.85rem;
    }

    .pn-bos h3 { font-size: 1rem; font-weight: 620; color: var(--pn-metin); margin: 0 0 0.3rem; }
    .pn-bos p { font-size: 0.86rem; margin: 0 auto 1rem; max-width: 420px; }

.pn-uyari {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    border: 1px solid var(--pn-vurgu-ton-2);
    background: var(--pn-vurgu-ton);
    color: var(--pn-metin);
    font-size: 0.88rem;
}

    .pn-uyari > i { color: var(--pn-vurgu-metin); font-size: 1.1rem; line-height: 1.3; flex-shrink: 0; }
    .pn-uyari strong { display: block; font-weight: 620; margin-bottom: 0.1rem; }
    .pn-uyari.basari { background: var(--pn-yesil-ton); border-color: var(--pn-yesil-kenar); }
    .pn-uyari.basari > i { color: var(--pn-yesil); }
    .pn-uyari.dikkat { background: var(--pn-sari-ton); border-color: var(--pn-sari-kenar); }
    .pn-uyari.dikkat > i { color: var(--pn-sari); }
    .pn-uyari.tehlike { background: var(--pn-kirmizi-ton); border-color: var(--pn-kirmizi-kenar); }
    .pn-uyari.tehlike > i { color: var(--pn-kirmizi); }
    .pn-uyari.tiklanir { cursor: pointer; }

.pn-iskelet {
    background: linear-gradient(90deg, var(--pn-yuzey-3) 25%, var(--pn-yuzey-2) 50%, var(--pn-yuzey-3) 75%);
    background-size: 200% 100%;
    animation: pn-parilti 1.3s ease-in-out infinite;
    border-radius: 8px;
    min-height: 14px;
}

@keyframes pn-parilti {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

/* ------------------------------------------------------------------ PENCERE (MODAL) */
.pn-perde {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 1055;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: pn-perde-ac 160ms ease-out;
}

@keyframes pn-perde-ac { from { opacity: 0; } to { opacity: 1; } }

.pn-pencere {
    background: var(--pn-yuzey);
    color: var(--pn-metin);
    font-family: var(--pn-yazi);
    font-size: 0.925rem;
    border: 1px solid var(--pn-kenar);
    border-radius: 18px;
    box-shadow: 0 24px 64px -16px rgba(15, 23, 42, 0.35);
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem); /* WEB: tarayıcı araç çubukları görünürken pencerenin başı/sonu ekran dışında kalmasın */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: pn-pencere-ac 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

    .pn-pencere.genis { max-width: 820px; }
    .pn-pencere.dar { max-width: 420px; }

@keyframes pn-pencere-ac {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to { opacity: 1; transform: none; }
}

.pn-pencere-bas {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--pn-kenar);
    flex-shrink: 0;
}

    .pn-pencere-bas h2, .pn-pencere-bas h3 { font-size: 1.05rem; font-weight: 640; margin: 0; }

.pn-pencere-govde {
    padding: 1.25rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    flex: 1 1 auto;
}

.pn-pencere-alt {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.9rem 1.25rem;
    border-top: 1px solid var(--pn-kenar);
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* Telefonda pencereler alttan açılan panel olur */
@media (max-width: 575.98px) {
    .pn-perde { align-items: flex-end; padding: 0; }

    .pn-pencere, .pn-pencere.genis, .pn-pencere.dar {
        max-width: 100%;
        max-height: 92vh;
        max-height: 92dvh; /* WEB: mobil tarayıcıda 92vh görünür alandan uzun olup başlık (kapat düğmesi) üstte kesiliyordu */
        border-radius: 22px 22px 0 0;
        border-bottom: none;
        animation: pn-alttan 240ms cubic-bezier(0.16, 1, 0.3, 1);
    }

    .pn-pencere-alt { padding-bottom: max(0.9rem, env(safe-area-inset-bottom)); }
    .pn-pencere-alt > .pn-btn { flex: 1 1 0; }
}

@keyframes pn-alttan { from { transform: translateY(100%); } to { transform: none; } }

/* ------------------------------------------------------------------ YARDIMCILAR */
.pn-soluk { color: var(--pn-metin-3); }
.pn-ikincil { color: var(--pn-metin-2); }
.pn-kucuk { font-size: 0.8rem; }
.pn-kalin { font-weight: 620; }
.pn-sayi { font-variant-numeric: tabular-nums; }
.pn-tek-satir { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pn-yesil-metin { color: var(--pn-yesil); }
.pn-kirmizi-metin { color: var(--pn-kirmizi); }
.pn-sari-metin { color: var(--pn-sari); }
.pn-vurgu-metin { color: var(--pn-vurgu-metin); }
.pn-ayrac { height: 1px; background: var(--pn-kenar); border: none; margin: 1rem 0; }

.pn-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--pn-vurgu-ton);
    color: var(--pn-vurgu-metin);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 650;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.pn-ilerleme {
    height: 6px;
    border-radius: 999px;
    background: var(--pn-yuzey-3);
    overflow: hidden;
}

    .pn-ilerleme > span {
        display: block;
        height: 100%;
        border-radius: inherit;
        background: var(--pn-vurgu);
        transition: width 400ms ease;
    }

.pn-anahtar-satir {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--pn-kenar);
}

    .pn-anahtar-satir:last-child { border-bottom: none; }
    .pn-anahtar-satir .baslik { font-weight: 600; color: var(--pn-metin); font-size: 0.92rem; }
    .pn-anahtar-satir .aciklama { font-size: 0.82rem; color: var(--pn-metin-3); margin-top: 0.15rem; }

.pn-kaydirma::-webkit-scrollbar { width: 8px; height: 8px; }
.pn-kaydirma::-webkit-scrollbar-track { background: transparent; }
.pn-kaydirma::-webkit-scrollbar-thumb { background: var(--pn-kenar-2); border-radius: 8px; }

/* Masaüstü / mobil görünürlük */
@media (max-width: 767.98px) { .pn-masaustu { display: none !important; } }
@media (min-width: 768px) { .pn-mobil { display: none !important; } }

/* Hareket azaltma tercihi */
@media (prefers-reduced-motion: reduce) {
    .pn-sayfa, .pn-pencere, .pn-perde { animation: none; }
    .pn-btn, .pn-kart.tiklanir { transition: none; }
}

/* ---- Büyük yazı (şoför uygulaması > Profil > Görünüm). rem tabanlı tüm ölçüler birlikte büyür. ---- */
html.buyuk-yazi { font-size: 112.5%; }

/* ---- Şifre kutuları: Windows (WebView2/Edge) kendi "şifreyi göster" gözünü de ekliyordu; uygulamanın kendi düğmesi yeterli ---- */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear { display: none; }