/* ============================================================================================================
 * ARAYÜZ 2027 — okul renklerinde düğme / form öğeleri + mobil düzen (2 Kasım 2026)
 *
 * Aç / kapat: application/config/arayuz.php › arayuz_2027 (FALSE → bu dosya hiç yüklenmez, site geçen yılki hâline döner).
 * Bütün kurallar `body.arayuz-2027` altında: sayfa paketleri (webpack style-loader) stillerini sonradan <head>'e ekliyor;
 * sınıf ön eki olmadan bu dosya onlara yenilirdi.
 *
 * Renkler kurumun sitesinden (oguzkaankoleji.com): kırmızı #c0272c, koyu #231f20 (alt bilgi), gri #939598 (slogan).
 * Yazı tipi Avalon (assets/css/fonts.css) — değişmedi.
 * ============================================================================================================ */

body.arayuz-2027 {
    --ok-kirmizi: #c0272c;
    --ok-kirmizi-koyu: #9f1f24;
    --ok-kirmizi-acik: #fbeff0;
    --ok-kirmizi-cizgi: #efc9cb;
    --ok-koyu: #231f20;
    --ok-gri: #6f7073;
    --ok-cizgi: #dcdcde;
    --ok-zemin: #f5f5f6;
    --ok-yaricap: 10px;
    --ok-golge: 0 6px 18px rgba(35, 31, 32, .07);

    background: var(--ok-zemin);
    color: var(--ok-koyu);
}

/* ------------------------------------------------------------ Odak çerçevesi
 * Fareyle / dokunarak basınca (menü, alt sekme, bağlantı, düğme) tarayıcının mavi çerçevesi çıkmaz; yalnız klavyeyle (Tab)
 * gezilirken ince bir çizgi görünür — erişilebilirlik korunur (PTS'deki kuralla aynı). */
body.arayuz-2027 a:focus,
body.arayuz-2027 button:focus,
body.arayuz-2027 .btn:focus,
body.arayuz-2027 .navbar-toggle:focus,
body.arayuz-2027 .mobile-bottom-nav .nav-item:focus {
    outline: none;
}

body.arayuz-2027 a:focus-visible,
body.arayuz-2027 button:focus-visible,
body.arayuz-2027 .mobile-bottom-nav .nav-item:focus-visible {
    outline: 2px solid rgba(192, 39, 44, .45);
    outline-offset: 2px;
}

body.arayuz-2027 #navbar-container ul.nav li a:focus-visible {
    outline-color: rgba(255, 255, 255, .8);
    outline-offset: -4px;
}

body.arayuz-2027 .mobile-bottom-nav .nav-item {
    -webkit-tap-highlight-color: transparent;
}

/* ------------------------------------------------------------ Üst menü (masaüstü / tablet)
 * Geçen yılki custom.css 1199 px altında yazıyı 16 px / iç boşluğu 5 px'e, 991 px altında 14 px'e düşürüyordu; menüde yalnız dört öğe
 * var, yer bol — öğeler sıkışmasın. */
@media only screen and (min-width: 992px) {
    body.arayuz-2027 ul#menu-main_menu > li > a {
        font-size: 17px;
        padding: 0 14px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    body.arayuz-2027 ul#menu-main_menu > li > a {
        font-size: 15px;
        padding: 0 10px;
    }
}

/* Menü ikonu yazıyla aynı hizada (2 Kas 2026, kullanıcı): Avalon büyük harfleri satır kutusunun üst kısmında duruyor,
 * ikonun görünen ortası harflerin ortasından ~3 px (17 px yazıda) aşağıda kalıyordu — ölçüldü. em: yazı boyutuyla birlikte ölçeklenir. */
body.arayuz-2027 #main-menu .navbar-nav > li > a > i.fa {
    position: relative;
    top: -.16em;
}

/* ------------------------------------------------------------ İçerik kartı */

body.arayuz-2027 .content-container {
    background: #fff;
    border-radius: 16px;
    box-shadow: var(--ok-golge);
    margin-top: 24px;
    margin-bottom: 24px;
    padding: 24px 28px 28px;
}

/* ------------------------------------------------------------ Başlıklar */

body.arayuz-2027 .content-container h3,
body.arayuz-2027 .content-container h4 {
    color: var(--ok-kirmizi);
}

body.arayuz-2027 legend {
    border-bottom: 1px solid #eee;
}

body.arayuz-2027 legend.subtitle {
    border-bottom: none;
    margin-top: 18px;
}

body.arayuz-2027 .number {
    background: var(--ok-kirmizi) !important;
    color: #fff !important;
    box-shadow: 0 3px 8px rgba(192, 39, 44, .3);
}

/* ------------------------------------------------------------ Düğmeler */

body.arayuz-2027 .btn {
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: .2px;
    padding: 9px 22px;
    transition: background-color .15s, box-shadow .15s, transform .05s;
}

body.arayuz-2027 .btn-lg {
    padding: 13px 30px;
    font-size: 17px;
}

body.arayuz-2027 .btn:active {
    transform: translateY(1px);
}

body.arayuz-2027 .btn:focus {
    outline: none;
}

body.arayuz-2027 .btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(192, 39, 44, .3);
}

/* Ana işlem — Kaydet, Yazdır, Başvur: dolu kırmızı */
body.arayuz-2027 .btn-primary,
body.arayuz-2027 .btn-success,
body.arayuz-2027 .btn-info,
body.arayuz-2027 .btn-danger {
    background: var(--ok-kirmizi);
    border-color: var(--ok-kirmizi);
    color: #fff;
    box-shadow: 0 4px 12px rgba(192, 39, 44, .25);
}

body.arayuz-2027 .btn-primary:hover,
body.arayuz-2027 .btn-success:hover,
body.arayuz-2027 .btn-info:hover,
body.arayuz-2027 .btn-danger:hover,
body.arayuz-2027 .btn-primary:focus,
body.arayuz-2027 .btn-success:focus,
body.arayuz-2027 .btn-info:focus,
body.arayuz-2027 .btn-danger:focus {
    background: var(--ok-kirmizi-koyu);
    border-color: var(--ok-kirmizi-koyu);
    color: #fff;
}

/* İkincil işlem — beyaz zemin, kırmızı çerçeve ve yazı */
body.arayuz-2027 .btn-default {
    background: #fff;
    border: 1.5px solid var(--ok-kirmizi-cizgi);
    color: var(--ok-kirmizi);
}

body.arayuz-2027 .btn-default:hover,
body.arayuz-2027 .btn-default:focus {
    background: var(--ok-kirmizi-acik);
    border-color: var(--ok-kirmizi);
    color: var(--ok-kirmizi-koyu);
}

body.arayuz-2027 .btn[disabled],
body.arayuz-2027 .btn.disabled {
    opacity: .45;
    box-shadow: none;
}

/* ------------------------------------------------------------ Form öğeleri */

body.arayuz-2027 .control-label,
body.arayuz-2027 .form-group > label {
    color: var(--ok-koyu);
    font-weight: 600;
}

body.arayuz-2027 .form-control {
    height: 46px;
    border: 1px solid var(--ok-cizgi);
    border-radius: var(--ok-yaricap);
    box-shadow: none;
    font-size: 16px;              /* iOS 16px altında odaklanınca sayfayı büyütüyor */
    color: var(--ok-koyu);
    transition: border-color .15s, box-shadow .15s;
}

body.arayuz-2027 textarea.form-control {
    height: auto;
}

body.arayuz-2027 .form-control:focus {
    border-color: var(--ok-kirmizi);
    box-shadow: 0 0 0 3px rgba(192, 39, 44, .15);
}

body.arayuz-2027 .form-control::placeholder {
    color: #a7a8ab;
}

body.arayuz-2027 .input-group-addon {
    background: var(--ok-kirmizi-acik);
    border-color: var(--ok-cizgi);
    color: var(--ok-kirmizi);
    min-width: 46px;
}

body.arayuz-2027 .input-group-addon:first-child {
    border-radius: var(--ok-yaricap) 0 0 var(--ok-yaricap);
}

body.arayuz-2027 .input-group .form-control:last-child,
body.arayuz-2027 .input-group-btn:last-child > .btn {
    border-radius: 0 var(--ok-yaricap) var(--ok-yaricap) 0;
}

body.arayuz-2027 .input-group-btn:last-child > .btn {
    height: 46px;
    padding: 0 16px;
    box-shadow: none;
}

body.arayuz-2027 .help-block {
    color: var(--ok-gri);
    font-size: 13px;
}

/* Hata durumu — kırmızı çerçeve, mesaj kırmızı (kalın siyah değil) */
body.arayuz-2027 .has-error .form-control {
    border-color: var(--ok-kirmizi);
}

body.arayuz-2027 .has-error .input-group-addon {
    background: var(--ok-kirmizi);
    border-color: var(--ok-kirmizi);
    color: #fff;
}

body.arayuz-2027 .has-error .control-label {
    color: var(--ok-kirmizi);
}

body.arayuz-2027 label.error,
body.arayuz-2027 .ci-errors {
    color: var(--ok-kirmizi) !important;
    font-weight: 600;
    font-size: 13px;
    margin-top: 6px;
}

/* ------------------------------------------------------------ Bilgi kutuları ve tablolar */

body.arayuz-2027 .notification {
    background: var(--ok-kirmizi-acik) !important;
    border: 1px solid var(--ok-kirmizi-cizgi);
    border-left: 4px solid var(--ok-kirmizi);
    border-radius: var(--ok-yaricap);
    color: var(--ok-kirmizi-koyu) !important;
}

body.arayuz-2027 .table-bordered {
    border-radius: var(--ok-yaricap);
    overflow: hidden;
}

body.arayuz-2027 .table > thead > tr.active > td,
body.arayuz-2027 .table > tbody > tr.active > td,
body.arayuz-2027 .table > thead > tr > th {
    background: var(--ok-kirmizi-acik);
}

/* ------------------------------------------------------------ Alt bilgi */

body.arayuz-2027 #footer {
    background: var(--ok-koyu);
    border-radius: 16px 16px 0 0;
}

/* ============================================================================================================
 * MOBİL (< 768px)
 * Geçen yılki düzen (src/components/mobile.css): başlık `fixed`, içerik `padding-top: 200px` + sabit yükseklikte
 * KENDİ İÇİNDE kayıyordu → üstte boş şerit, alt bilgi sayfanın ortasında. Burada sayfa doğal kayar; başlık ince ve
 * yapışkan, üst kırmızı menü gizli (alttaki sekme menüsü onun yerine).
 * ============================================================================================================ */

@media only screen and (max-width: 767px) {

    body.arayuz-2027.mobile-view #logo-container {
        position: sticky;
        top: 0;
        z-index: 1001;
        background: #fff;
        box-shadow: 0 2px 10px rgba(35, 31, 32, .08);
        padding-top: 9px;
        padding-bottom: 8px;
        padding-right: 8px;    /* 2 Kas (kullanıcı): simgeler sağa dayalı */
    }

    body.arayuz-2027 div#logo-row a,
    body.arayuz-2027 div#search-form-container,
    body.arayuz-2027.mobile-view #logo-container,
    body.arayuz-2027.mobile-view #logo-container > .row,
    body.arayuz-2027 div#logo-row {
        height: auto;   /* mobile.css başlığa 55px sabit veriyordu — 58px logo taşıyordu */
    }

    body.arayuz-2027.mobile-view #logo-container > .row,
    body.arayuz-2027 div#logo-row,
    body.arayuz-2027 div#search-form-container {
        margin-bottom: 0;
    }

    body.arayuz-2027.mobile-view #logo-container > .row {
        display: flex;          /* float yerine — sağdaki alan logo yüksekliğine uzayabilsin */
        margin-right: 0;        /* .row -15px sağa taşıyordu → simgeler ekran dışına, sayfa yatay kayıyordu */
    }

    body.arayuz-2027 div#search-form-container {
        height: auto !important;   /* mobile.css: height 55px !important */
    }

    body.arayuz-2027 div#logo-row {
        align-items: center;
    }

    /* Başlık: solda logo + okul adı, sağda sosyal medya (geçen yıl logo dev, ad gizliydi) */
    body.arayuz-2027 div#logo-row {
        width: auto;
        flex: 1 1 auto;   /* simgelerden kalan bütün alan okul adına */
        min-width: 0;
        padding-left: 4px;
    }

    body.arayuz-2027 div#search-form-container {
        width: auto;
        flex: 0 0 auto;
        flex-direction: row;          /* custom.css row-reverse kuruyor — o yönde flex-end SOLA yaslıyordu */
        justify-content: flex-end;    /* simgeler sağ kenara dayalı */
        align-self: stretch;    /* 2 Kas (kullanıcı): sosyal simgeler SAĞ ALT KÖŞEDE — alan başlık boyunca uzar, */
        align-items: flex-end;  /* simgeler alanın altına oturur */
        align-content: flex-end;   /* custom.css alanı satır kaydırmalı kuruyor — satır da alta */
        padding: 0 0 2px 0;   /* 4 simge 109px — dar ekranda (360px) sonuncusu kesiliyordu */
    }

    body.arayuz-2027 div#logo-row a {
        flex: 0 0 auto;
    }

    body.arayuz-2027 div#logo-row a img {
        position: static;
        width: 58px;   /* 2 Kas: 50 → 58, başlık küçük kalıyordu (kullanıcı) */
        max-width: none;
        height: 58px;
        object-fit: contain;
    }

    body.arayuz-2027 div#titles {
        margin: 0 0 0 10px;
        align-items: flex-start;
    }

    body.arayuz-2027 div#titles .header-title.hidden-xs,
    body.arayuz-2027 div#titles .header-slogan.hidden-xs {
        display: block !important;
    }

    body.arayuz-2027 div.header-title {
        font-size: 18px;
        line-height: 1.2;
        font-weight: 700;   /* 2 Kas (kullanıcı): daha belirgin */
        color: var(--ok-kirmizi);
        text-align: left;
    }

    body.arayuz-2027 div.header-slogan {
        font-size: 13px;
        line-height: 1.3;
        font-weight: 600;
        color: #555;
        letter-spacing: .6px;
        text-align: left;
    }

    body.arayuz-2027 div#social-icons-top {
        flex-wrap: nowrap;
        justify-content: flex-end;
        gap: 3px;
        margin-top: 0;
    }
}

/* Okul adı ekran genişledikçe büyür (2 Kas, kullanıcı: "biraz daha büyür") — simgelerle çakışmadan ölçüldü */
@media only screen and (min-width: 375px) and (max-width: 767px) {
    body.arayuz-2027 div.header-title { font-size: 19px; }
}

@media only screen and (min-width: 390px) and (max-width: 767px) {
    body.arayuz-2027 div.header-title { font-size: 21px; }
    body.arayuz-2027 div.header-slogan { font-size: 14px; }
}

/* Çok dar telefon (≤ 340px, ör. iPhone SE 1. nesil): okul adı tek satırda kalsın, simgeler kenara dayanmasın */
@media only screen and (max-width: 340px) {
    body.arayuz-2027 div#logo-row a img { width: 50px; height: 50px; }
    body.arayuz-2027 div.header-title { font-size: 15px; }
    body.arayuz-2027 div.header-slogan { font-size: 12px; }
    body.arayuz-2027 div#social-icons-top { gap: 2px; }
    body.arayuz-2027 div#social-icons-top a { width: 23px; height: 23px; line-height: 23px; font-size: 11px; }
    body.arayuz-2027.mobile-view .af-adimlar { top: 67px; }   /* başlık burada 67px */
}

@media only screen and (max-width: 767px) {

    body.arayuz-2027.mobile-view #navbar-container {
        display: none;
    }

    body.arayuz-2027.mobile-view .content-container {
        padding: 18px 16px 22px;
        margin: 12px 10px 16px;
        height: auto;
        overflow: visible;
        border-radius: 14px;
    }

    body.arayuz-2027 div#social-icons-top a {
        width: 25px;
        height: 25px;
        line-height: 25px;
        font-size: 12px;
        margin: 0;
    }

    /* Teşekkür sayfası "Sınava Gelirken" kutusu — satır içi padding (40px sol, 0 sağ) dar ekranda yazıyı kenara dayıyordu */
    body.arayuz-2027 .content-container fieldset[style] {
        padding: 12px 14px !important;
    }

    /* Ana işlem düğmeleri tam genişlik; kartın içinde kalsın, uzun yazı satır kırsın */
    body.arayuz-2027 .btn-lg,
    body.arayuz-2027 #submit-container .btn,
    body.arayuz-2027 .submit-container .btn {
        display: block;
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    body.arayuz-2027 #submit-container,
    body.arayuz-2027 .submit-container {
        margin-left: 0;
        margin-right: 0;
        padding: 0;
    }

    body.arayuz-2027 .button-container {
        padding: 0 10px;
    }

    body.arayuz-2027 .button-container > a {
        display: block;
        max-width: 100%;
        white-space: normal;
        text-align: center;
        line-height: 1.35;
    }

    body.arayuz-2027 #footer {
        border-radius: 0;
        margin-bottom: 0;
    }

    /* Alt sekme menüsü — etkin sekme kırmızı, iPhone çentik payı */
    body.arayuz-2027 .mobile-bottom-nav {
        background: #fff;
        border-top: 1px solid #eee;
        box-shadow: 0 -4px 14px rgba(35, 31, 32, .06);
        padding-bottom: env(safe-area-inset-bottom);
    }

    body.arayuz-2027 .mobile-bottom-nav .nav-item {
        color: var(--ok-gri);
    }

    body.arayuz-2027 .mobile-bottom-nav .nav-item.active,
    body.arayuz-2027 .mobile-bottom-nav .nav-item.active i {
        color: var(--ok-kirmizi);
    }
}

/* ============================================================================================================
 * SINAV BİLGİLERİ — landing page (application/views/bilgi-2027.php; ab- önekli sınıflar)
 * ============================================================================================================ */

body.arayuz-2027 .ab-sayfa {
    padding: 0;
    overflow: hidden;
}

body.arayuz-2027 .ab-bolum {
    padding: 28px 32px 8px;
}

body.arayuz-2027 .ab-baslik {
    font-size: 22px;
    font-weight: 700;
    color: var(--ok-koyu);
    margin: 0 0 16px;
}

body.arayuz-2027 .ab-baslik::after {
    content: '';
    display: block;
    width: 44px;
    height: 3px;
    border-radius: 3px;
    background: var(--ok-kirmizi);
    margin-top: 8px;
}

/* Logo yanındaki okul adı + slogan — SABİT px (13 Kas 2026, kullanıcı: "boyutları sayfa değişince değişiyor").
   custom.css em kullanıyor; bilgi.css gövdeyi 16px yaptığı için Bilgi / Bilişsel sayfalarında büyük, form / giriş belgesinde
   (14px) küçük çıkıyordu. Değerler 16px gövdedeki görünüm (reklamın açtığı sayfalar). Telefon kuralları aşağıda ayrı. */
@media only screen and (min-width: 992px) {
    body.arayuz-2027 div.header-title { font-size: 38px; line-height: 1.3; }
    body.arayuz-2027 div.header-slogan { font-size: 25px; line-height: 1.3; }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    body.arayuz-2027 div.header-title { font-size: 30px; line-height: 1.3; }
    body.arayuz-2027 div.header-slogan { font-size: 19px; line-height: 1.3; }
}

/* Başlığın yanında kapsam ("4–10. sınıf", 13 Kas 2026) */
body.arayuz-2027 .ab-baslik small {
    color: var(--ok-gri);
    font-size: 14px;
    font-weight: 400;
    margin-left: 6px;
}

/* Üst bölüm */
body.arayuz-2027 .ab-hero {
    background: linear-gradient(135deg, #c0272c 0%, #9f1f24 100%);
    color: #fff;
    padding: 40px 32px 34px;
    text-align: center;
}

body.arayuz-2027 .ab-hero-etiket {
    display: inline-block;
    background: rgba(255, 255, 255, .16);
    border-radius: 999px;
    padding: 5px 14px;
    font-size: 13px;
    letter-spacing: .4px;
}

body.arayuz-2027 .ab-hero-baslik {
    color: #fff;
    font-size: 40px;
    font-weight: 700;
    margin: 14px 0 8px;
}

body.arayuz-2027 .ab-hero-alt {
    font-size: 17px;
    line-height: 1.5;
    max-width: 620px;
    margin: 0 auto 18px;
    color: rgba(255, 255, 255, .92);
}

body.arayuz-2027 .ab-hero-bilgiler {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 22px;
}

body.arayuz-2027 .ab-cip {
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 14px;
}

body.arayuz-2027 .ab-cip-vurgu {
    background: #fff;
    color: var(--ok-kirmizi);
    font-weight: 700;
    border-color: #fff;
}

body.arayuz-2027 .ab-hero-dugmeler {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

/* Kırmızı zeminde: ana düğme beyaz, ikincil düğme saydam çerçeveli */
body.arayuz-2027 .ab-hero .btn-primary {
    background: #fff;
    border-color: #fff;
    color: var(--ok-kirmizi);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
}

body.arayuz-2027 .ab-hero .btn-primary:hover,
body.arayuz-2027 .ab-hero .btn-primary:focus {
    background: #fbeff0;
    color: var(--ok-kirmizi-koyu);
}

body.arayuz-2027 .ab-hero .btn-default {
    background: transparent;
    border-color: rgba(255, 255, 255, .7);
    color: #fff;
}

body.arayuz-2027 .ab-hero .btn-default:hover,
body.arayuz-2027 .ab-hero .btn-default:focus {
    background: rgba(255, 255, 255, .12);
    border-color: #fff;
    color: #fff;
}

/* Adımlar */
body.arayuz-2027 .ab-adimlar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

body.arayuz-2027 .ab-adim {
    background: var(--ok-zemin);
    border-radius: 14px;
    padding: 18px 18px 14px;
}

body.arayuz-2027 .ab-adim-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--ok-kirmizi);
    color: #fff;
    font-weight: 700;
}

body.arayuz-2027 .ab-adim h3 {
    color: var(--ok-koyu);
    font-size: 16px;
    font-weight: 700;
    margin: 10px 0 6px;
}

body.arayuz-2027 .ab-adim p {
    font-size: 14px;
    line-height: 1.5;
    color: #444;
    margin: 0;
}

/* Bilgi kartları */
body.arayuz-2027 .ab-kartlar {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

body.arayuz-2027 .ab-kart {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    border: 1px solid #eee;
    border-radius: 14px;
    padding: 14px 16px;
    font-size: 14px;
    line-height: 1.5;
}

body.arayuz-2027 .ab-kart > i {
    flex: 0 0 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--ok-kirmizi-acik);
    color: var(--ok-kirmizi);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}

/* Sınıf kartları (soru sayıları) */
body.arayuz-2027 .ab-siniflar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

body.arayuz-2027 .ab-sinif {
    border: 1px solid #eee;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

body.arayuz-2027 .ab-sinif-ust {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--ok-kirmizi-acik);
    padding: 12px 14px;
}

body.arayuz-2027 .ab-sinif-ad {
    font-weight: 700;
    color: var(--ok-kirmizi-koyu);
}

body.arayuz-2027 .ab-sinif-sure {
    font-size: 13px;
    color: var(--ok-kirmizi);
    white-space: nowrap;
}

/* Kart başlığı altında sınavın adı / biçimi (1-3. sınıflar, 12 Kas 2026) */
body.arayuz-2027 .ab-sinif-tur {
    padding: 8px 14px 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--ok-gri);
}

body.arayuz-2027 .ab-dersler {
    list-style: none;
    margin: 0;
    padding: 6px 14px;
    flex: 1;
}

body.arayuz-2027 .ab-dersler li {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px dashed #eee;
    font-size: 14px;
}

body.arayuz-2027 .ab-dersler li:last-child {
    border-bottom: none;
}

body.arayuz-2027 .ab-sinif-alt {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: #fafafa;
    padding: 10px 14px;
    font-size: 13px;
    color: var(--ok-gri);
}

body.arayuz-2027 .ab-sinif-alt strong {
    color: var(--ok-koyu);
}

body.arayuz-2027 .ab-not {
    margin: 14px 0 0;
    font-size: 13px;
    color: var(--ok-gri);
}

body.arayuz-2027 .ab-liste {
    padding-left: 18px;
    font-size: 14px;
    line-height: 1.6;
}

body.arayuz-2027 .ab-liste li::marker {
    color: var(--ok-kirmizi);
}

/* Son çağrı */
body.arayuz-2027 .ab-cagri {
    margin: 24px 32px 32px;
    background: var(--ok-koyu);
    color: #fff;
    border-radius: 16px;
    padding: 26px 24px;
    text-align: center;
}

body.arayuz-2027 .ab-cagri h2 {
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 6px;
}

body.arayuz-2027 .ab-cagri p {
    color: rgba(255, 255, 255, .8);
    margin: 0 0 16px;
}

@media only screen and (max-width: 767px) {
    /* mobil kart kuralının (padding 18px 16px) önüne geçer — üst bölüm kartın kenarına kadar */
    body.arayuz-2027.mobile-view .content-container.ab-sayfa,
    body.arayuz-2027 .content-container.ab-sayfa {
        padding: 0;
    }

    body.arayuz-2027 .ab-hero {
        padding: 28px 18px 24px;
    }

    body.arayuz-2027 .ab-hero-baslik {
        font-size: 30px;
    }

    body.arayuz-2027 .ab-hero-alt {
        font-size: 15px;
    }

    body.arayuz-2027 .ab-hero-dugmeler .btn {
        width: 100%;
    }

    body.arayuz-2027 .ab-bolum {
        padding: 22px 16px 4px;
    }

    body.arayuz-2027 .ab-adimlar,
    body.arayuz-2027 .ab-kartlar,
    body.arayuz-2027 .ab-siniflar {
        grid-template-columns: 1fr;
    }

    body.arayuz-2027 .ab-cagri {
        margin: 20px 12px 18px;
        padding: 22px 16px;
    }

    body.arayuz-2027 .ab-cagri .btn {
        width: 100%;
    }
}

/* ============================================================================================================
 * TEŞEKKÜR — başvuru sonrası (application/views/tesekkur-2027.php; at- önekli sınıflar, başlıkta ab-baslik)
 * ============================================================================================================ */

body.arayuz-2027 .at-sayfa {
    padding: 0;
    overflow: hidden;
}

body.arayuz-2027 .at-basari {
    background: linear-gradient(135deg, #c0272c 0%, #9f1f24 100%);
    color: #fff;
    text-align: center;
    padding: 36px 24px 30px;
}

body.arayuz-2027 .at-basari-simge {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #fff;
    color: var(--ok-kirmizi);
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}

body.arayuz-2027 .at-basari h1 {
    color: #fff;
    font-size: 32px;
    font-weight: 700;
    margin: 0 0 6px;
}

body.arayuz-2027 .at-basari p {
    color: rgba(255, 255, 255, .9);
    font-size: 16px;
    margin: 0;
}

body.arayuz-2027 .at-bolum {
    padding: 26px 32px 6px;
}

body.arayuz-2027 .at-belge {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: var(--ok-kirmizi-acik);
    border: 1px solid var(--ok-kirmizi-cizgi);
    border-radius: 14px;
    padding: 16px 18px;
    font-size: 14px;
    line-height: 1.55;
}

body.arayuz-2027 .at-belge-metin strong:first-child {
    display: block;
    color: var(--ok-kirmizi-koyu);
    margin-bottom: 2px;
}

body.arayuz-2027 .at-belge-simge {
    flex: 0 0 42px;
    height: 42px;
    border-radius: 12px;
    background: #fff;
    color: var(--ok-kirmizi);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
}

body.arayuz-2027 .at-dugme {
    text-align: center;
    margin-top: 18px;
}

body.arayuz-2027 .at-listeler {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

body.arayuz-2027 .at-liste {
    border: 1px solid #eee;
    border-radius: 14px;
    padding: 14px 18px 10px;
}

body.arayuz-2027 .at-liste h3 {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 8px;
}

body.arayuz-2027 .at-liste-evet h3 {
    color: #2e7d32;
}

body.arayuz-2027 .at-liste-hayir h3 {
    color: var(--ok-kirmizi);
}

body.arayuz-2027 .at-liste ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

body.arayuz-2027 .at-liste li {
    padding: 6px 0 6px 24px;
    position: relative;
    font-size: 14px;
    border-bottom: 1px dashed #eee;
}

body.arayuz-2027 .at-liste li:last-child {
    border-bottom: none;
}

body.arayuz-2027 .at-liste li::before {
    font-family: FontAwesome;
    position: absolute;
    left: 2px;
    top: 6px;
}

body.arayuz-2027 .at-liste-evet li::before {
    content: '\f00c';
    color: #2e7d32;
}

body.arayuz-2027 .at-liste-hayir li::before {
    content: '\f00d';
    color: var(--ok-kirmizi);
}

body.arayuz-2027 .at-son {
    text-align: center;
    padding-bottom: 30px;
}

@media only screen and (max-width: 767px) {
    body.arayuz-2027.mobile-view .content-container.at-sayfa,
    body.arayuz-2027 .content-container.at-sayfa {
        padding: 0;
    }

    body.arayuz-2027 .at-basari h1 {
        font-size: 26px;
    }

    body.arayuz-2027 .at-bolum {
        padding: 20px 16px 4px;
    }

    body.arayuz-2027 .at-listeler {
        grid-template-columns: 1fr;
    }

    body.arayuz-2027 .at-dugme .btn,
    body.arayuz-2027 .at-son .btn {
        width: 100%;
    }
}

/* ============================================================================================================
 * BAŞVURU FORMU (application/views/basvuru.php; af- önekli sarmalayıcılar — anahtar kapalıyken etkisiz)
 * Bölümler kart, üstte adım göstergesi (1 Sınav · 2 Öğrenci · 3 Veli · 4 Onay — bölüme kaydırır).
 * ============================================================================================================ */

body.arayuz-2027 #burslulukBasvuru > fieldset > legend.text-center {
    border-bottom: none;
    margin-bottom: 6px;
}

body.arayuz-2027 #burslulukBasvuru > fieldset > legend.text-center h3 {
    font-weight: 700;
}

body.arayuz-2027 .af-adimlar {
    display: flex !important;               /* görünümde varsayılan gizli (anahtar kapalıyken) */
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0 0 22px;
}

body.arayuz-2027 .af-adimlar a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px 6px 6px;
    border-radius: 999px;
    background: var(--ok-zemin);
    color: var(--ok-koyu);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: background-color .15s;
}

body.arayuz-2027 .af-adimlar a:hover {
    background: var(--ok-kirmizi-acik);
    color: var(--ok-kirmizi-koyu);
}

body.arayuz-2027 .af-adimlar a span {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--ok-kirmizi);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

body.arayuz-2027 .af-bolum {
    background: #f8f8f9;                     /* beyaz form kartından ayrışsın; alanlar beyaz kalır (kullanıcı, 2 Kas: "çok hafif bir ton") */
    border: 1px solid #ebebed;
    border-radius: 16px;
    padding: 6px 24px 10px;
    margin-bottom: 18px;
    scroll-margin-top: 90px;                 /* adım göstergesinden gelince yapışkan başlığın altında kalmasın */
}

body.arayuz-2027 .af-bolum .subtitle-container {
    justify-content: flex-start;
}

body.arayuz-2027 .af-bolum legend.subtitle {
    width: auto;
    margin: 14px 0 18px;
    font-size: 17px;
    color: var(--ok-kirmizi);
}

/* Masaüstü: etiket sütunu dar, alan sütunu geniş (geçen yıl 4 + 4 sütun, kartın yarısı boş kalıyordu) */
@media only screen and (min-width: 992px) {
    body.arayuz-2027 .af-bolum .form-group > .col-md-4.control-label {
        width: 28%;
    }

    body.arayuz-2027 .af-bolum .form-group > .col-md-4:not(.control-label) {
        width: 58%;
    }
}

/* Onay kartı — KVKK işaretleri tam genişlik, okunaklı */
body.arayuz-2027 .af-bolum .form-control {
    background-color: #fff;
}

body.arayuz-2027 .af-onay .form-group > label.control-label {
    display: none;
}

body.arayuz-2027 .af-onay .af-onay-baslik {
    display: flex !important;               /* görünümde varsayılan gizli (anahtar kapalıyken) */
}

body.arayuz-2027 .af-onay #kvkk-radio-container {
    padding-top: 0 !important;
}

body.arayuz-2027 .af-onay #kvkk-radio-container {
    width: 100%;
    float: none;
    padding: 14px 6px 0;
}

body.arayuz-2027 .af-onay .radio label {
    font-size: 14px;
    line-height: 1.55;
    color: #333;
}

body.arayuz-2027 .af-onay mark {
    background: var(--ok-kirmizi-acik);
    color: var(--ok-kirmizi-koyu);
    border-radius: 4px;
    padding: 0 4px;
}

body.arayuz-2027 .af-onay a#kvkk_text {
    text-decoration: underline;
}

body.arayuz-2027 #submit-container {
    margin: 10px 0 12px;
}

@media only screen and (max-width: 767px) {
    /* Adım göstergesi başlığın altında yapışkan, yana kayar */
    body.arayuz-2027 .af-adimlar {
        position: sticky;
        top: 75px;                           /* yapışkan başlığın ölçülen yüksekliği (2 Kas: logo 58px → 75) — arada içerik görünmesin */
        z-index: 900;
        background: #fff;
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        margin: 0 -16px 16px;
        padding: 8px 16px;
        border-bottom: 1px solid #eee;
        scrollbar-width: none;
    }

    body.arayuz-2027 .af-adimlar::-webkit-scrollbar {
        display: none;
    }

    body.arayuz-2027 .af-adimlar {
        gap: 6px;
    }

    body.arayuz-2027 .af-adimlar a {
        flex: 0 0 auto;
        font-size: 13px;
        padding: 4px 10px 4px 4px;
        gap: 5px;
    }

    /* Ortala; sığmazsa (dar ekran) sola kırpmadan kaydırılabilsin — justify-content: center taşmada ilk çipi keserdi */
    body.arayuz-2027 .af-adimlar a:first-child {
        margin-left: auto;
    }

    body.arayuz-2027 .af-adimlar a:last-child {
        margin-right: auto;
    }

    body.arayuz-2027 .af-adimlar a span {
        width: 22px;
        height: 22px;
        font-size: 11px;
    }

    @media only screen and (max-width: 374px) {
        body.arayuz-2027 .af-adimlar {
            gap: 4px;
        }

        body.arayuz-2027 .af-adimlar a {
            font-size: 12px;
            padding: 3px 8px 3px 3px;
        }
    }

    body.arayuz-2027 .af-bolum {
        padding: 2px 14px 6px;
        scroll-margin-top: 110px;            /* başlık 55 + çip çubuğu ~50 */
    }
}

/* ============================================================================================================
 * SINAV GİRİŞ BELGESİ (application/views/sinav_giris_belgesi.php; ag- önekli — anahtar kapalıyken etkisiz)
 * ============================================================================================================ */

body.arayuz-2027 #girisBelgesi > fieldset > legend {
    border-bottom: none;
    text-align: center;
    margin-bottom: 4px;
}

body.arayuz-2027 #girisBelgesi > fieldset > legend h3 {
    font-weight: 700;
}

body.arayuz-2027 .ag-aciklama {
    display: block !important;               /* görünümde varsayılan gizli */
    text-align: center;
    color: var(--ok-gri);
    max-width: 560px;
    margin: 0 auto 20px;
    font-size: 14px;
    line-height: 1.55;
}

body.arayuz-2027 .ag-kart {
    max-width: 720px;
    margin: 0 auto 10px;
    background: #f8f8f9;
    border: 1px solid #ebebed;
    border-radius: 16px;
    padding: 22px 24px 8px;
}

@media only screen and (min-width: 992px) {
    body.arayuz-2027 .ag-kart .form-group > .col-md-4.control-label {
        width: 30%;
    }

    body.arayuz-2027 .ag-kart .form-group > .col-md-4:not(.control-label) {
        width: 62%;
    }
}

@media only screen and (max-width: 767px) {
    body.arayuz-2027 .ag-kart {
        padding: 14px 14px 4px;
    }
}

/* "Okulumuz hakkında bilgi…" (giriş belgesi sayfasının altı) — asıl işlemle (Yazdır) yarışmasın: ikincil düğme */
body.arayuz-2027 .button-container > a {
    background: #fff;
    color: var(--ok-kirmizi);
    border: 1.5px solid var(--ok-kirmizi-cizgi);
    box-shadow: none;
    font-size: 15px;
    padding: 9px 22px;
}

body.arayuz-2027 .button-container > a:hover,
body.arayuz-2027 .button-container > a:focus {
    background: var(--ok-kirmizi-acik);
    color: var(--ok-kirmizi-koyu) !important;
    border-color: var(--ok-kirmizi);
}

body.arayuz-2027 .button-container > a > i {
    background: var(--ok-kirmizi);
    color: #fff;
}