/* ==========================================================================
   Yakuplu Kemal Arıkan Ortaokulu — Kitap Seti Satış
   Tek CSS dosyası. Web fontu YOK (sistem fontu = sıfır font isteği).
   Sonsuz animasyon YOK (WebKit'te OOM riski).
   ========================================================================== */

:root {
    --lacivert:      #003060;
    --lacivert-koyu: #002048;
    --mavi:          #0090f0;
    --mavi-acik:     #e8f4fe;
    --yesil:         #2e9e4f;
    --yesil-acik:    #eaf7ee;
    --turuncu:       #f26522;
    --kirmizi:       #d63b3b;
    --kirmizi-acik:  #fdeded;
    --sari:          #ffc20e;

    --zemin:    #f4f6f9;
    --kart:     #ffffff;
    --cizgi:    #e4e9f0;
    --cizgi-koyu: #cfd8e3;
    --yazi:     #16233a;
    --yazi-soluk: #5d6b82;
    --yazi-cok-soluk: #8a97ab;

    --golge:    0 1px 2px rgba(16, 35, 60, .05), 0 4px 16px rgba(16, 35, 60, .06);
    --golge-yuksek: 0 2px 4px rgba(16, 35, 60, .06), 0 12px 32px rgba(16, 35, 60, .10);
    --yuvarlak: 14px;
    --yuvarlak-kucuk: 9px;

    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
            "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --font-sayi: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.6;
    color: var(--yazi);
    background: var(--zemin);
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--mavi); }
a:hover { color: var(--lacivert); }

h1, h2, h3 { line-height: 1.25; margin: 0 0 .5rem; letter-spacing: -.01em; }
h1 { font-size: 1.5rem; font-weight: 700; }
h2 { font-size: 1.2rem; font-weight: 650; }
h3 { font-size: 1rem;   font-weight: 650; }
p  { margin: 0 0 1rem; }

/* Bot tuzağı — ekran okuyucudan ve gözden gizli */
.gizli-tuzak { position: absolute !important; left: -9999px !important; top: -9999px !important; }

/* --------------------------------------------------------- düzen */

.kabuk {
    max-width: 52rem;
    margin: 0 auto;
    padding: 0 16px;
}
.kabuk-dar { max-width: 34rem; }

/* --------------------------------------------------------- üst bant */

.ust {
    background: linear-gradient(160deg, var(--lacivert) 0%, var(--lacivert-koyu) 100%);
    color: #fff;
    padding: 22px 0 26px;
}
.ust-ic {
    display: flex;
    align-items: center;
    gap: 16px;
}
.ust-logo {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    border-radius: 12px;
    background: #fff;
    padding: 5px;
    object-fit: contain;   /* panelden yüklenen kare olmayan logo ezilmesin */
}
.ust-yazi { min-width: 0; }
.ust-okul {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
}
.ust-alt {
    margin: 2px 0 0;
    font-size: .82rem;
    color: #a8c6e8;
    font-weight: 500;
}

@media (min-width: 640px) {
    .ust { padding: 30px 0 34px; }
    .ust-logo { width: 74px; height: 74px; flex-basis: 74px; }
    .ust-okul { font-size: 1.3rem; }
}

/* --------------------------------------------------------- gövde */

main { padding: 26px 0 40px; }

.kart {
    background: var(--kart);
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak);
    box-shadow: var(--golge);
    padding: 20px 18px;
    margin: 0 0 16px;
}
@media (min-width: 640px) { .kart { padding: 26px 26px; } }

.kart-baslik {
    margin: 0 0 4px;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--lacivert);
}
.kart-alt {
    margin: 0 0 20px;
    color: var(--yazi-soluk);
    font-size: .94rem;
}

/* --------------------------------------------------------- adım göstergesi */

.adimlar {
    display: flex;
    gap: 6px;
    margin: 0 0 20px;
    list-style: none;
    padding: 0;
    font-size: .75rem;
    font-weight: 600;
}
.adimlar li {
    flex: 1;
    text-align: center;
    padding: 7px 4px;
    border-radius: 7px;
    background: #fff;
    border: 1px solid var(--cizgi);
    color: var(--yazi-cok-soluk);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.adimlar li[aria-current="step"] {
    background: var(--lacivert);
    border-color: var(--lacivert);
    color: #fff;
}
.adimlar li.bitti {
    background: var(--yesil-acik);
    border-color: #bfe3ca;
    color: #1d7038;
}

/* --------------------------------------------------------- sınıf kartları */

.sinif-izgara {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}
@media (min-width: 560px) { .sinif-izgara { grid-template-columns: 1fr 1fr; } }

.sinif-kart {
    display: block;
    text-decoration: none;
    color: inherit;
    background: var(--kart);
    border: 1.5px solid var(--cizgi);
    border-radius: var(--yuvarlak);
    padding: 18px;
    box-shadow: var(--golge);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.sinif-kart:hover,
.sinif-kart:focus-visible {
    border-color: var(--mavi);
    box-shadow: var(--golge-yuksek);
    transform: translateY(-2px);
    color: inherit;
}
.sinif-kart-ust {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}
.sinif-no {
    font-size: 1.45rem;
    font-weight: 750;
    color: var(--lacivert);
    letter-spacing: -.02em;
}
.sinif-kitap {
    font-size: .78rem;
    font-weight: 600;
    color: var(--mavi);
    background: var(--mavi-acik);
    padding: 3px 9px;
    border-radius: 20px;
    white-space: nowrap;
}
.sinif-fiyat {
    margin: 12px 0 0;
    font-size: 1.5rem;
    font-weight: 750;
    color: var(--yazi);
    letter-spacing: -.02em;
}
.sinif-fiyat span { font-size: .95rem; font-weight: 600; color: var(--yazi-soluk); }
.sinif-liste {
    margin: 2px 0 0;
    font-size: .84rem;
    color: var(--yazi-cok-soluk);
}
.sinif-liste s { color: var(--yazi-cok-soluk); }
.sinif-liste b { color: var(--yesil); font-weight: 650; }
.sinif-git {
    margin: 14px 0 0;
    font-size: .9rem;
    font-weight: 650;
    color: var(--mavi);
}

/* --------------------------------------------------------- kitap listesi */

.bolum-basligi {
    margin: 22px 0 8px;
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--mavi);
}
.bolum-basligi:first-child { margin-top: 0; }

.kitap-liste { list-style: none; margin: 0; padding: 0; }
.kitap-liste li {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 0;
    border-bottom: 1px solid #f0f3f7;
    font-size: .92rem;
}
.kitap-liste li:last-child { border-bottom: 0; }
.kitap-ad { color: var(--yazi); min-width: 0; }
.kitap-fiyat {
    color: var(--yazi-cok-soluk);
    font-family: var(--font-sayi);
    font-size: .85rem;
    white-space: nowrap;
}

/* --------------------------------------------------------- fiyat özeti */

.ozet {
    margin: 20px 0 0;
    padding: 16px 18px;
    background: linear-gradient(160deg, #f7fbff, #eef6fd);
    border: 1px solid #d3e6f8;
    border-radius: var(--yuvarlak);
}
.ozet-satir {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-size: .92rem;
    color: var(--yazi-soluk);
    padding: 3px 0;
}
.ozet-satir.iri {
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid #d3e6f8;
    font-size: 1rem;
    color: var(--yazi);
}
.ozet-satir.iri strong {
    font-size: 1.6rem;
    font-weight: 750;
    color: var(--lacivert);
    letter-spacing: -.02em;
}
.kazanc {
    display: inline-block;
    margin-top: 10px;
    font-size: .86rem;
    font-weight: 650;
    color: #1d7038;
    background: var(--yesil-acik);
    border: 1px solid #bfe3ca;
    padding: 5px 11px;
    border-radius: 8px;
}

/* --------------------------------------------------------- form */

.alan { margin: 0 0 16px; }
.alan-etiket {
    display: block;
    margin: 0 0 6px;
    font-size: .88rem;
    font-weight: 600;
    color: var(--yazi);
}
.alan-etiket .ops { font-weight: 500; color: var(--yazi-cok-soluk); }
.alan-ipucu {
    margin: 5px 0 0;
    font-size: .8rem;
    color: var(--yazi-cok-soluk);
    line-height: 1.45;
}

input[type="text"],
input[type="tel"],
input[type="email"],
input[type="password"],
input[type="number"],
select {
    width: 100%;
    font-family: inherit;
    font-size: 1rem;               /* 16px: iOS'ta odakta zoom olmasın */
    color: var(--yazi);
    background: #fff;
    border: 1.5px solid var(--cizgi-koyu);
    border-radius: var(--yuvarlak-kucuk);
    padding: 11px 13px;
    transition: border-color .12s ease, box-shadow .12s ease;
    -webkit-appearance: none;
    appearance: none;
}
select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%235d6b82' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    padding-right: 36px;
}
input:focus, select:focus {
    outline: none;
    border-color: var(--mavi);
    box-shadow: 0 0 0 3px rgba(0, 144, 240, .16);
}
input[aria-invalid="true"] {
    border-color: var(--kirmizi);
    background: #fffafa;
}
input:disabled {
    background: #f2f5f9;
    color: var(--yazi-cok-soluk);
    cursor: not-allowed;
}

.onay {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 0 0 12px;
    font-size: .89rem;
    line-height: 1.5;
    color: var(--yazi-soluk);
    cursor: pointer;
}
.onay input[type="checkbox"] {
    flex: 0 0 19px;
    width: 19px;
    height: 19px;
    margin: 1px 0 0;
    accent-color: var(--mavi);
    cursor: pointer;
}
.onay a { font-weight: 600; }

/* --------------------------------------------------------- düğmeler */

.dugme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    font-family: inherit;
    font-size: 1.02rem;
    font-weight: 650;
    line-height: 1.2;
    color: #fff;
    background: var(--mavi);
    border: 0;
    border-radius: var(--yuvarlak-kucuk);
    padding: 14px 20px;
    cursor: pointer;
    text-decoration: none;
    transition: background .13s ease, transform .13s ease;
}
.dugme:hover  { background: #007ad1; color: #fff; }
.dugme:active { transform: translateY(1px); }
.dugme:disabled { background: var(--cizgi-koyu); cursor: not-allowed; transform: none; }
.dugme-ikincil {
    background: #fff;
    color: var(--lacivert);
    border: 1.5px solid var(--cizgi-koyu);
}
.dugme-ikincil:hover { background: #f7f9fc; color: var(--lacivert); border-color: var(--mavi); }
.dugme-dar { width: auto; }
.dugme-kucuk { padding: 9px 15px; font-size: .9rem; }

/* --------------------------------------------------------- uyarı blokları */

.uyari {
    display: flex;
    gap: 11px;
    padding: 13px 15px;
    border-radius: var(--yuvarlak-kucuk);
    font-size: .91rem;
    line-height: 1.55;
    margin: 0 0 16px;
    border: 1px solid transparent;
}
.uyari p:last-child { margin: 0; }
.uyari-hata   { background: var(--kirmizi-acik); border-color: #f5c6c6; color: #8f2323; }
.uyari-basari { background: var(--yesil-acik);   border-color: #bfe3ca; color: #1d6b36; }
.uyari-bilgi  { background: var(--mavi-acik);    border-color: #bfdef8; color: #0b4f86; }
.uyari-dikkat { background: #fff8e6;             border-color: #f5e0a8; color: #85631a; }
.uyari-ikon { flex: 0 0 auto; font-weight: 700; }

.hata-liste { margin: 6px 0 0; padding-left: 20px; }
.hata-liste li { margin: 2px 0; }

/* --------------------------------------------------------- durum etiketleri */

.etiket {
    display: inline-block;
    font-size: .76rem;
    font-weight: 650;
    padding: 3px 9px;
    border-radius: 20px;
    white-space: nowrap;
}
.etiket-odendi    { background: var(--yesil-acik); color: #1d7038; }
.etiket-beklemede { background: #fff4d9; color: #8a6216; }
.etiket-basarisiz { background: var(--kirmizi-acik); color: #a32a2a; }
.etiket-iptal     { background: #eef1f5; color: #5d6b82; }

/* --------------------------------------------------------- bilgi tablosu */

.bilgi { width: 100%; border-collapse: collapse; }
.bilgi th, .bilgi td {
    text-align: left;
    padding: 10px 0;
    border-bottom: 1px solid #f0f3f7;
    font-size: .93rem;
    vertical-align: top;
}
.bilgi th {
    font-weight: 500;
    color: var(--yazi-soluk);
    width: 42%;
}
.bilgi td { font-weight: 600; }
.bilgi tr:last-child th, .bilgi tr:last-child td { border-bottom: 0; }
.bilgi .no { font-family: var(--font-sayi); letter-spacing: .02em; }

/* --------------------------------------------------------- ödeme çerçevesi */

.odeme-cerceve {
    width: 100%;
    min-height: 620px;
    border: 0;
    border-radius: var(--yuvarlak-kucuk);
    background: #fff;
}
.odeme-yukleniyor {
    text-align: center;
    padding: 50px 20px;
    color: var(--yazi-soluk);
}

/* --------------------------------------------------------- alt bant */

.alt {
    border-top: 1px solid var(--cizgi);
    background: #fff;
    padding: 24px 0 30px;
    font-size: .85rem;
    color: var(--yazi-soluk);
}
.alt-linkler {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
}
.alt-linkler a {
    color: var(--yazi-soluk);
    text-decoration: none;
    border-bottom: 1px solid var(--cizgi-koyu);
}
.alt-linkler a:hover { color: var(--mavi); border-color: var(--mavi); }
.alt-not { margin: 0; font-size: .8rem; color: var(--yazi-cok-soluk); line-height: 1.6; }

/* ==========================================================================
   MAKBUZ (baskı)
   ========================================================================== */

.makbuz {
    background: #fff;
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak);
    padding: 26px 22px;
    box-shadow: var(--golge);
}
.makbuz-ust {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    justify-content: space-between;
    padding-bottom: 18px;
    border-bottom: 2px solid var(--lacivert);
    margin-bottom: 20px;
}
.makbuz-logo { width: 62px; height: 62px; flex: 0 0 62px; object-fit: contain; }
.makbuz-baslik { font-size: 1.1rem; font-weight: 750; color: var(--lacivert); margin: 0; }
.makbuz-tip {
    margin: 3px 0 0;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--yazi-cok-soluk);
}
.makbuz-no { text-align: right; }
.makbuz-no dt { font-size: .72rem; color: var(--yazi-cok-soluk); text-transform: uppercase; letter-spacing: .04em; }
.makbuz-no dd { margin: 1px 0 8px; font-family: var(--font-sayi); font-weight: 700; font-size: .92rem; }
.makbuz-toplam {
    margin: 20px 0 0;
    padding: 16px 18px;
    background: var(--zemin);
    border-radius: var(--yuvarlak-kucuk);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.makbuz-toplam strong { font-size: 1.45rem; color: var(--lacivert); letter-spacing: -.02em; }
.makbuz-damga {
    display: inline-block;
    margin: 16px 0 0;
    padding: 7px 14px;
    border: 2px solid var(--yesil);
    color: var(--yesil);
    border-radius: 8px;
    font-weight: 700;
    font-size: .85rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.makbuz-imza {
    margin: 24px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--cizgi);
    font-size: .78rem;
    color: var(--yazi-cok-soluk);
    line-height: 1.6;
}
.makbuz-arac { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 16px; }

@media print {
    body { background: #fff; font-size: 12pt; }
    .ust, .alt, .makbuz-arac, .adimlar, .basma { display: none !important; }
    main { padding: 0; }
    .kabuk { max-width: none; padding: 0; }
    .makbuz {
        border: 0;
        box-shadow: none;
        border-radius: 0;
        padding: 0;
    }
    .makbuz-toplam { background: #f2f2f2 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .makbuz-damga  { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    a[href]::after { content: ""; }
}

/* ==========================================================================
   YÖNETİM PANELİ
   ========================================================================== */

.yon-ust {
    background: var(--lacivert);
    color: #fff;
    padding: 12px 0;
}
.yon-ust-ic { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.yon-marka { font-weight: 700; font-size: 1rem; }
.yon-marka span { font-weight: 400; color: #a8c6e8; font-size: .85rem; }
.yon-cikis { color: #a8c6e8; font-size: .85rem; text-decoration: none; }
.yon-cikis:hover { color: #fff; }

.yon-menu-sarmal { background: var(--lacivert-koyu); }
/* Sahip rolu 10 bolum goruyor; tek satira ~990px gerekiyor ama sutun 52rem
   (832px). Eskiden yatay kaydiriyordu, kaydirma cubugu da gizli oldugu icin
   son bolumler ("Entegrasyon", "Guvenlik") kesik goruniyordu. Artik sigmayan
   alt satira sariyor: kirpilma imkansiz. */
.yon-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    max-width: 52rem;
    margin: 0 auto;
    padding: 0 16px;
}

/* Dar ekranda sarmak 3-4 satir eder; orada parmakla yatay kaydirmak daha
   iyi. Kaydirma cubugu gizli ama dokunmatikte kaydirma zaten kesfedilebilir. */
@media (max-width: 720px) {
    .yon-menu {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .yon-menu::-webkit-scrollbar { display: none; }
}
.yon-menu a {
    color: #a8c6e8;
    text-decoration: none;
    font-size: .88rem;
    font-weight: 600;
    padding: 11px 14px;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
}
.yon-menu a:hover { color: #fff; }
.yon-menu a[aria-current="page"] { color: #fff; border-bottom-color: var(--mavi); }

.kutu-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
    gap: 12px;
    margin: 0 0 18px;
}
/* Dar telefonda iki sutun kalinca karta ~132px metin alani kaliyor; ciro
   milyonu gecince nowrap ile tasardi. Tek sutunda ~310px alan var. */
@media (max-width: 430px) {
    .kutu-izgara { grid-template-columns: 1fr; }
}
.kutu {
    background: #fff;
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak-kucuk);
    padding: 15px 16px;
}
.kutu-etiket {
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--yazi-cok-soluk);
    margin: 0 0 5px;
}
.kutu-deger {
    font-size: 1.55rem;
    font-weight: 750;
    color: var(--lacivert);
    letter-spacing: -.02em;
    line-height: 1.1;
    /* Sayi ile birimi ("234.500,00" + "TL") ayri satira dusmesin. */
    white-space: nowrap;
}
.kutu-deger.kucuk { font-size: 1.15rem; }
.kutu-alt { font-size: .8rem; color: var(--yazi-cok-soluk); margin: 3px 0 0; }

.tablo-sarmal { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tablo {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
    min-width: 680px;
}
.tablo th {
    text-align: left;
    font-weight: 650;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--yazi-soluk);
    padding: 9px 10px;
    border-bottom: 2px solid var(--cizgi);
    white-space: nowrap;
    background: #fafbfd;
}
.tablo td {
    padding: 10px;
    border-bottom: 1px solid #f0f3f7;
    vertical-align: middle;
}
.tablo tbody tr:hover { background: #fafbfd; }
.tablo .sag { text-align: right; }
.tablo .no { font-family: var(--font-sayi); font-size: .82rem; }

.filtre {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: flex-end;
    margin: 0 0 16px;
}
.filtre .alan { margin: 0; flex: 1 1 130px; min-width: 0; }
.filtre .alan-etiket { font-size: .78rem; }

.sayfalama {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin: 18px 0 0;
    font-size: .88rem;
}
.sayfalama a, .sayfalama span {
    padding: 7px 12px;
    border-radius: 7px;
    text-decoration: none;
    border: 1px solid var(--cizgi);
    color: var(--yazi-soluk);
    background: #fff;
}
.sayfalama a:hover { border-color: var(--mavi); color: var(--mavi); }
.sayfalama .simdiki { background: var(--lacivert); border-color: var(--lacivert); color: #fff; font-weight: 650; }

.ayar-grup {
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak-kucuk);
    padding: 18px;
    margin: 0 0 16px;
    background: #fff;
}
.ayar-grup > h3 {
    margin: 0 0 4px;
    color: var(--lacivert);
    font-size: 1rem;
}
.ayar-grup > .aciklama {
    margin: 0 0 16px;
    font-size: .86rem;
    color: var(--yazi-soluk);
}
.ikili {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 16px;
}
@media (min-width: 620px) { .ikili { grid-template-columns: 1fr 1fr; } }

.maskeli { font-family: var(--font-sayi); font-size: .85rem; color: var(--yesil); }

/* Gönderim sırasında düğme meşgul durumu (app.js ekler) */
.dugme.mesgul {
    pointer-events: none;
    opacity: .62;
}

/* Baskıda gizlenecek ayraç */
hr.basma {
    border: 0;
    border-top: 1px solid var(--cizgi);
    margin: 20px 0 18px;
}

/* ==========================================================================
   v2 — sade sınıf kartı, katlanır fatura bölümü, seçim grubu
   ========================================================================== */

[hidden] { display: none !important; }

/* Fiyatsız sınıf kartı */
.sinif-kart-sade {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 22px 20px;
}
.sinif-kart-sade .sinif-git { margin: 0; }

/* Fiyatsız kitap listesi */
.kitap-liste-sade li { display: block; }
.kitap-liste-sade .kitap-ad { display: block; }

/* Katlanır bölüm */
.katlanir {
    margin: 22px 0 18px;
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak-kucuk);
    padding: 15px 16px;
    background: #fbfcfe;
}
.onay-baslik { margin: 0; font-size: .95rem; color: var(--yazi); }
.katlanir-govde {
    margin: 16px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--cizgi);
}

/* Bireysel / Kurumsal seçimi */
.secim-grubu {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 0 0 18px;
}
.secim {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px 14px;
    border: 1.5px solid var(--cizgi-koyu);
    border-radius: var(--yuvarlak-kucuk);
    background: #fff;
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease;
}
.secim:hover { border-color: var(--mavi); }
.secim input[type="radio"] {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    accent-color: var(--mavi);
    cursor: pointer;
}
.secim span { display: block; line-height: 1.35; }
.secim strong { display: block; font-size: .95rem; font-weight: 650; }
.secim small { display: block; font-size: .78rem; color: var(--yazi-cok-soluk); margin-top: 1px; }
.secim:has(input:checked) {
    border-color: var(--mavi);
    background: var(--mavi-acik);
}

@media (max-width: 460px) {
    .secim-grubu { grid-template-columns: 1fr; }
}

/* ==========================================================================
   v2 — yönetim paneli: paket kartları, izin ızgarası, kopyalama, eylem hücresi
   ========================================================================== */

.kart-giris { max-width: 26rem; margin-left: auto; margin-right: auto; }
.kart-vurgu { border-color: var(--mavi); box-shadow: 0 0 0 3px rgba(0,144,240,.12), var(--golge); }

.yon-kullanici { font-size: .85rem; color: #cfe1f4; }
.yon-kullanici small {
    display: inline-block;
    font-size: .72rem;
    color: #8fb4d8;
    background: rgba(255,255,255,.1);
    padding: 1px 7px;
    border-radius: 20px;
    margin-left: 5px;
}

/* ---------- paket kartları ---------- */
.paket-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 12px;
}
.paket-kutu {
    border: 1.5px solid var(--cizgi);
    border-radius: var(--yuvarlak-kucuk);
    padding: 15px 16px;
    background: #fff;
}
.paket-kutu-secili { border-color: var(--mavi); background: #f8fcff; }
.paket-kutu-ust {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 14px;
}
.paket-sinif { font-size: 1.1rem; font-weight: 750; color: var(--lacivert); }
.paket-kutu-islem { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* ---------- satır formu (kitap ekle) ---------- */
.satir-form {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    flex-wrap: wrap;
    padding: 14px 15px;
    margin: 0 0 18px;
    background: #f7f9fc;
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak-kucuk);
}
.satir-form .alan { margin: 0; flex: 0 1 190px; }
.satir-form .alan-genis { flex: 1 1 320px; }

.alan-kisa { max-width: 120px; }
.alan-mini { max-width: 78px; }

/* ---------- tablo eylemleri ---------- */
.islem-hucre { white-space: nowrap; }
.islem-hucre form { display: inline-block; margin: 0 2px 0 0; }
.sutun-sira { width: 90px; }
.log-govde {
    font-family: var(--font-sayi);
    font-size: .76rem;
    color: var(--yazi-soluk);
    word-break: break-all;
    max-width: 34rem;
}
.kucuk-yazi { font-size: .8rem; }
.secili-satir { background: #f8fcff; }

.baglanti-dugme {
    display: inline-block;
    font-size: .84rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--mavi);
    padding: 6px 10px;
    border: 1px solid var(--cizgi-koyu);
    border-radius: 7px;
    background: #fff;
}
.baglanti-dugme:hover { border-color: var(--mavi); }

.dugme-tehlike { background: var(--kirmizi); }
.dugme-tehlike:hover { background: #b82f2f; color: #fff; }

/* ---------- izin ızgarası ---------- */
.izin-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 8px;
    margin: 0 0 18px;
}
.onay-izin {
    align-items: flex-start;
    margin: 0;
    padding: 11px 13px;
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak-kucuk);
    background: #fff;
}
.onay-izin strong { display: block; font-size: .9rem; color: var(--yazi); font-weight: 650; }
.onay-izin small { display: block; font-size: .76rem; color: var(--yazi-cok-soluk); margin-top: 1px; line-height: 1.4; }
.onay-izin:has(input:checked) { border-color: var(--mavi); background: #f8fcff; }
.onay-kilitli { opacity: .62; cursor: default; }
.onay-tek { margin: 0; font-size: .84rem; }

/* ---------- kopyalanabilir alan ---------- */
.kopyala-satir {
    display: flex;
    gap: 8px;
    align-items: stretch;
    flex-wrap: wrap;
}
.kopyala-satir input {
    flex: 1 1 260px;
    font-family: var(--font-sayi);
    font-size: .84rem;
    background: #f7f9fc;
}
.kopyala-satir .dugme { flex: 0 0 auto; }

/* ==========================================================================
   v3 — MOBİL DENEYİM KATMANI
   Bu blok dosyanın sonunda olduğu için yukarıdaki kuralları aynı özgüllükte
   ezebilir. Sonsuz animasyon ve backdrop-filter kullanılmaz (WebKit'te OOM
   ve GPU riski).
   ========================================================================== */

:root { color-scheme: light; }

/* --------------------------------------------------------- güvenli alan
   viewport-fit=cover ile çentikli cihazlarda yatayda içerik kesilmesin. */
.kabuk,
.yon-menu {
    padding-left:  max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
}
.alt { padding-bottom: calc(30px + env(safe-area-inset-bottom)); }

/* --------------------------------------------------------- dokunma geri bildirimi
   iOS'un gri vurgu kutusu kart köşelerinin dışına taşıyor; kendi :active
   durumumuzu veriyoruz. */
a, button, label, input, select, textarea, .sinif-kart {
    -webkit-tap-highlight-color: transparent;
}
.sinif-kart:active { transform: scale(.985); border-color: var(--mavi); }
.dugme:active      { transform: translateY(1px); }
.secim:active      { border-color: var(--mavi); }

/* Dokunmatikte :hover yapışıp kalır — parmak çekildikten sonra kart havada
   asılı kalıyordu. Faresiz cihazlarda hover etkilerini geri alıyoruz. */
@media (hover: none) {
    .sinif-kart:hover {
        transform: none;
        border-color: var(--cizgi);
        box-shadow: var(--golge);
    }
    .dugme:hover          { background: var(--mavi); }
    .dugme-ikincil:hover  { background: #fff; border-color: var(--cizgi-koyu); }
    .dugme-tehlike:hover  { background: var(--kirmizi); }
    .secim:hover          { border-color: var(--cizgi-koyu); }
    .secim:has(input:checked):hover { border-color: var(--mavi); }
    .tablo tbody tr:hover { background: transparent; }
    .alt-linkler a:hover  { color: var(--yazi-soluk); border-color: var(--cizgi-koyu); }
    .sayfalama a:hover    { border-color: var(--cizgi); color: var(--yazi-soluk); }
    .baglanti-dugme:hover { border-color: var(--cizgi-koyu); }
    a:hover               { color: var(--mavi); }
}

/* --------------------------------------------------------- dokunma hedefleri
   Parmakla kullanılan her şey en az ~44px yüksekliğe çıkar (WCAG 2.5.5). */
@media (pointer: coarse) {
    .dugme-kucuk     { padding: 12px 17px; }
    .baglanti-dugme  { padding: 11px 14px; }
    .sayfalama a,
    .sayfalama span  { padding: 11px 16px; }
    .alt-linkler     { gap: 2px 18px; }
    .alt-linkler a   { display: inline-block; padding: 12px 0; }
    .yon-menu a      { padding: 14px; }
    /* .onay-izin kendi dolgusunu korur (yönetim izin ızgarası) */
    .onay:not(.onay-izin) { padding: 11px 0; }
    .onay input[type="checkbox"] { flex-basis: 22px; width: 22px; height: 22px; }
    .secim input[type="radio"]   { flex-basis: 21px; width: 21px; height: 21px; }
}

/* --------------------------------------------------------- klavye odağı */
:focus-visible { outline: 2px solid var(--mavi); outline-offset: 2px; }
input:focus-visible,
select:focus-visible,
textarea:focus-visible { outline: none; }   /* kendi halka gölgeleri var */

/* Yapışkan çubuk, odaklanan alanı örtmesin */
.alan, .onay, .secim-grubu { scroll-margin: 90px 0 120px; }

/* --------------------------------------------------------- çok satırlı adres
   400 karakterlik adresi tek satırlık input'ta yazmak mobilde okunmuyor. */
textarea {
    display: block;
    width: 100%;
    font-family: inherit;
    font-size: 1rem;               /* 16px: iOS'ta odakta zoom olmasın */
    line-height: 1.5;
    color: var(--yazi);
    background: #fff;
    border: 1.5px solid var(--cizgi-koyu);
    border-radius: var(--yuvarlak-kucuk);
    padding: 11px 13px;
    min-height: 78px;
    resize: vertical;
    transition: border-color .12s ease, box-shadow .12s ease;
    -webkit-appearance: none;
    appearance: none;
}
textarea:focus {
    outline: none;
    border-color: var(--mavi);
    box-shadow: 0 0 0 3px rgba(0, 144, 240, .16);
}
textarea[aria-invalid="true"],
select[aria-invalid="true"] {
    border-color: var(--kirmizi);
    background-color: #fffafa;
}

/* --------------------------------------------------------- alan altı hata
   Hataların tamamını sayfanın tepesinde listelemek mobilde işe yaramıyor:
   kullanıcı hangi alanın yanlış olduğunu görmek için geri kaydırmak zorunda. */
.alan-hata {
    display: flex;
    gap: 6px;
    align-items: flex-start;
    margin: 6px 0 0;
    font-size: .83rem;
    font-weight: 600;
    line-height: 1.45;
    color: #a32a2a;
}
.alan-hata::before {
    content: "!";
    flex: 0 0 16px;
    height: 16px;
    margin-top: 2px;
    border-radius: 50%;
    background: var(--kirmizi);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}
.onay.hatali {
    border-radius: var(--yuvarlak-kucuk);
    background: var(--kirmizi-acik);
    box-shadow: 0 0 0 8px var(--kirmizi-acik);
}

/* --------------------------------------------------------- adım göstergesi
   Dar ekranda dört etiket yan yana sığmıyor, hepsi "..." oluyordu. Küçük
   ekranda ilerleme çubuğu + yalnızca bulunulan adımın adı gösterilir. */
@media (max-width: 540px) {
    .adimlar { gap: 5px; align-items: center; }
    .adimlar li {
        flex: 0 0 20px;
        height: 5px;
        padding: 0;
        border-radius: 3px;
        font-size: 0;            /* metin görünmez, ekran okuyucuda kalır */
        line-height: 0;
    }
    .adimlar li[aria-current="step"] {
        flex: 1 1 auto;
        height: auto;
        padding: 7px 12px;
        border-radius: 7px;
        font-size: .78rem;
        line-height: 1.4;
    }
}

/* --------------------------------------------------------- yapışkan eylem çubuğu
   Kitap listesi + uzun form yüzünden ana düğme ekranın çok altında kalıyor.
   Satır içi düğme görünmezken çubuk ekranın altına sabitlenir. */
.yapiskan {
    position: fixed;
    visibility: hidden;   /* kapalıyken klavyeyle odaklanamasın */
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    background: #fff;
    border-top: 1px solid var(--cizgi);
    box-shadow: 0 -4px 20px rgba(16, 35, 60, .10);
    padding: 10px 0 calc(10px + env(safe-area-inset-bottom));
    transform: translateY(105%);
    transition: transform .2s ease, visibility 0s linear .2s;
    pointer-events: none;
}
.yapiskan.acik {
    transform: none;
    visibility: visible;
    transition: transform .2s ease, visibility 0s;
    pointer-events: auto;
}
.yapiskan-ic {
    display: flex;
    align-items: center;
    gap: 14px;
}
.yapiskan-tutar {
    flex: 0 1 auto;
    min-width: 0;
    line-height: 1.25;
}
.yapiskan-tutar small {
    display: block;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--yazi-cok-soluk);
}
.yapiskan-tutar strong {
    font-size: 1.2rem;
    font-weight: 750;
    color: var(--lacivert);
    letter-spacing: -.02em;
    white-space: nowrap;
}
.yapiskan .dugme { flex: 1 1 auto; width: auto; }

/* JavaScript yoksa çubuk hiç görünmesin — satır içi düğme zaten orada. */
.yapiskan { display: none; }
.js .yapiskan { display: block; }

/* --------------------------------------------------------- ödeme çerçevesi
   Yavaş mobil bağlantıda 620px boş beyaz alan yerine iskelet gösterilir. */
.odeme-sarmal { position: relative; min-height: 620px; }
.odeme-sarmal .odeme-cerceve { position: relative; z-index: 1; }
.odeme-iskelet {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: #fff;
    border-radius: var(--yuvarlak-kucuk);
    padding: 26px 20px;
}
.odeme-iskelet p {
    margin: 0 0 22px;
    font-size: .9rem;
    font-weight: 600;
    color: var(--yazi-soluk);
    text-align: center;
}
.iskelet-satir {
    height: 46px;
    margin: 0 0 14px;
    border-radius: var(--yuvarlak-kucuk);
    background: linear-gradient(100deg, #f1f4f8 0%, #e7ecf3 50%, #f1f4f8 100%);
}
.iskelet-satir.kisa { width: 55%; }

/* --------------------------------------------------------- uzun değerler
   Sipariş no, işlem referansı ve adres dar ekranda taşmasın. */
.bilgi td, .bilgi th { overflow-wrap: anywhere; }
@media (max-width: 400px) {
    .bilgi th { width: 40%; font-size: .88rem; }
    .bilgi td { font-size: .88rem; }
}

/* --------------------------------------------------------- makbuz */
@media (max-width: 520px) {
    .makbuz { padding: 20px 16px; }
    .makbuz-ust { flex-wrap: wrap; gap: 12px; }
    .makbuz-no { text-align: left; flex: 1 1 100%; }
    .makbuz-no dd { margin-bottom: 6px; }
    .makbuz-arac .dugme { flex: 1 1 auto; }
}

/* --------------------------------------------------------- hareket azaltma */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   v3 — YÖNETİM PANELİ: telefonda tablo yerine kart
   Yalnızca .tablo-kart sınıfı verilen tablolarda devreye girer; her <td>
   kendi başlığını data-etiket niteliğinden okur.
   ========================================================================== */

@media (max-width: 760px) {
    .tablo-kart-sarmal { overflow: visible; }

    .tablo-kart { display: block; min-width: 0; font-size: .92rem; }
    .tablo-kart thead {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    .tablo-kart tbody { display: block; }
    .tablo-kart tbody tr {
        display: block;
        margin: 0 0 10px;
        padding: 13px 15px;
        background: #fff;
        border: 1px solid var(--cizgi);
        border-radius: var(--yuvarlak-kucuk);
        box-shadow: var(--golge);
    }
    .tablo-kart td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 14px;
        padding: 5px 0;
        border: 0;
        text-align: left;
    }
    .tablo-kart td::before {
        content: attr(data-etiket);
        flex: 0 0 auto;
        font-size: .74rem;
        font-weight: 650;
        text-transform: uppercase;
        letter-spacing: .03em;
        color: var(--yazi-cok-soluk);
    }
    /* Sipariş no kart başlığı olur */
    .tablo-kart td.kart-basi {
        display: block;
        margin: -2px 0 8px;
        font-family: var(--font-sayi);
        font-size: .95rem;
        font-weight: 700;
        color: var(--lacivert);
    }
    /* Eylem hücresi tam genişlik düğme olur */
    .tablo-kart td.tam {
        display: block;
        margin-top: 10px;
        padding-top: 12px;
        border-top: 1px solid var(--cizgi);
    }
    .tablo-kart td.tam .baglanti-dugme { display: block; text-align: center; }
    .tablo-kart td.kart-basi::before,
    .tablo-kart td.tam::before,
    .tablo-kart td[colspan]::before { content: none; }
    .tablo-kart td.sag { text-align: left; }
    .tablo-kart td[colspan] { display: block; text-align: center; color: var(--yazi-soluk); }
}

/* Filtre çubuğu: dar ekranda alanlar ikişerli, düğmeler tam genişlik */
@media (max-width: 560px) {
    .filtre .alan { flex: 1 1 calc(50% - 5px); }
    .filtre .alan-genis-mobil { flex: 1 1 100%; }
    .filtre .dugme { flex: 1 1 100%; width: auto; }
}

/* Ekran klavyesi açıkken yapışkan çubuk alanın üstüne binmesin (.acik ezilir) */
.yapiskan.klavye { transform: translateY(105%); visibility: hidden; pointer-events: none; }

/* Yapışkan çubuğun tetikleyici eşiği — IntersectionObserver sıfır alanlı
   öğelerde güvenilmez, bu yüzden ölçülebilir bir kutu veriyoruz. */
#yapiskan-esigi { display: block; height: 1px; }

/* İskelet yalnızca JavaScript açıkken gösterilir — kapalıyken app.js onu
   kaldıramaz ve iframe tamamen örtülü kalırdı. */
.odeme-iskelet { display: none; }
.js .odeme-iskelet { display: block; }
.js .odeme-iskelet[hidden] { display: none; }

/* Tek başına duran metin bağlantıları (ör. "Sınıf seçimine dön") parmakla
   rahat vurulabilsin; paragraf içi bağlantılar WCAG 2.5.5 istisnasında. */
@media (pointer: coarse) {
    .alt-not > a { display: inline-block; padding: 13px 2px; }
}

/* Fiyat özetinde tek satır varsa üstteki ayraç boşlukta asılı kalıyordu. */
.ozet-satir.iri:only-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* ==========================================================================
   v3 — tehlikeli bölge (yalnızca sahip rolüne görünen silme kartı)
   ========================================================================== */

.kart-tehlike {
    border-color: #f0b9b9;
    background: #fffbfb;
}
.kart-baslik-tehlike { color: var(--kirmizi); }
.kart-tehlike .dugme-tehlike { margin-top: 4px; }
.kart-tehlike .onay { align-items: center; }

/* ==========================================================================
   PayTR taksit tablosu
   PayTR'nin verdigi stiller; satir ici <style> CSP'ye takildigi icin burada.
   ========================================================================== */
#paytr_taksit_tablosu { clear: both; font-size: 12px; max-width: 1200px; text-align: center; }
#paytr_taksit_tablosu::before { display: table; content: " "; }
#paytr_taksit_tablosu::after { content: ""; clear: both; display: table; }
.taksit-tablosu-wrapper { margin: 5px; width: 280px; padding: 12px; cursor: default;
    text-align: center; display: inline-block; border: 1px solid #e1e1e1; border-radius: 8px; }
.taksit-logo img { max-height: 28px; padding-bottom: 10px; }
.taksit-tutari-text { float: left; width: 126px; color: #a2a2a2; margin-bottom: 5px; }
.taksit-tutar-wrapper { display: inline-block; background-color: #f7f7f7; }
.taksit-tutar-wrapper:hover { background-color: #e8e8e8; }
.taksit-tutari { float: left; width: 126px; padding: 6px 0; color: #474747; border: 2px solid #fff; }
.taksit-tutari-bold { font-weight: bold; }
@media all and (max-width: 600px) { .taksit-tablosu-wrapper { margin: 5px 0; } }

/* Footer iletisim/adres blogu (PayTR canli mod sarti) */
.alt-iletisim { font-style: normal; line-height: 1.7; margin: 0 0 .75rem; }
.alt-iletisim a { text-decoration: underline; }

/* ==========================================================================
   Panel: logo ve okul adı (Site bölümü, yalnızca sahip)
   ========================================================================== */
.bolum-ayrac { margin-top: 32px; }
.logo-satir {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 0 18px;
}
.logo-onizleme {
    width: 84px;
    height: 84px;
    flex: 0 0 84px;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--cizgi);
    border-radius: 12px;
    padding: 6px;
}
.logo-bos {
    display: flex;
    align-items: center;
    justify-content: center;
    border-style: dashed;
    font-size: .78rem;
    color: var(--yazi-cok-soluk);
}
.logo-durum { margin: 0; font-weight: 600; }
.logo-durum .etiket { margin-left: 6px; }
.logo-dugmeler { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }