/* ==========================================================
   ANADOLU DİYABET OKULU — TASARIM SİSTEMİ
   site.css'ten SONRA yüklenir, üzerine biner.
   ========================================================== */

/* ----------------------------------------------------------
   1. TOKEN'LAR
   ---------------------------------------------------------- */

:root {

    /* --- Marka: mor skala --- */
    --brand-50:  #F6F3FF;
    --brand-100: #EDE7FE;
    --brand-200: #DDD2FD;
    --brand-300: #C3B0FB;
    --brand-400: #A585F7;
    --brand-500: #8B5CF6;
    --brand-600: #7A38EE;
    --brand-700: #6926D4;
    --brand-800: #5620AC;

    /* --- Vurgu: pembe skala --- */
    --accent-50:  #FFF1F6;
    --accent-100: #FFE1EC;
    --accent-200: #FFC5DA;
    --accent-300: #FB93B8;
    --accent-400: #F45E92;
    --accent-500: #E63771;
    --accent-600: #CE1F5B;
    --accent-700: #A9154A;

    /* --- Nötr: mürekkep skala --- */
    --ink-950: #0A0F1C;
    --ink-900: #121A2B;
    --ink-800: #1E293B;
    --ink-700: #334155;
    --ink-600: #475569;
    --ink-500: #64748B;
    --ink-400: #94A3B8;
    --ink-300: #CBD5E1;
    --ink-200: #E4E8EF;
    --ink-100: #F1F4F9;
    --ink-50:  #F8FAFC;

    /* --- Durum renkleri --- */
    --ok-500:     #0FA968;
    --ok-50:      #E8F8F0;
    --warn-500:   #E8930C;
    --warn-50:    #FEF6E7;
    --danger-500: #E23D4C;
    --danger-50:  #FDECEE;
    --info-500:   #2F6FED;
    --info-50:    #EAF1FE;

    /* --- Anlamsal --- */
    --canvas:      #FFFFFF;
    --canvas-alt:  var(--ink-50);
    --surface:     #FFFFFF;
    --surface-alt: var(--ink-50);
    --line:        var(--ink-200);
    --line-soft:   var(--ink-100);
    --text:        var(--ink-800);
    --text-soft:   var(--ink-600);
    --text-muted:  var(--ink-500);

    /* --- Gradyanlar --- */
    --grad-brand:      linear-gradient(135deg, var(--brand-600) 0%, var(--accent-500) 100%);
    --grad-brand-alt:  linear-gradient(135deg, var(--brand-500) 0%, var(--accent-400) 100%);
    --grad-soft:       linear-gradient(150deg, var(--brand-50) 0%, var(--accent-50) 100%);
    --grad-ink:        linear-gradient(135deg, var(--ink-900) 0%, var(--ink-700) 100%);

    /* --- Köşe yarıçapı --- */
    --r-xs:   6px;
    --r-sm:   10px;
    --r-md:   14px;
    --r-lg:   18px;
    --r-xl:   24px;
    --r-full: 999px;

    /* --- Gölgeler (katmanlı, yumuşak) --- */
    --sh-xs:   0 1px 2px rgba(15, 23, 42, .05);
    --sh-sm:   0 1px 3px rgba(15, 23, 42, .06), 0 4px 12px rgba(15, 23, 42, .04);
    --sh-md:   0 2px 6px rgba(15, 23, 42, .05), 0 12px 28px rgba(15, 23, 42, .07);
    --sh-lg:   0 4px 10px rgba(15, 23, 42, .05), 0 24px 56px rgba(15, 23, 42, .11);
    --sh-glow: 0 10px 32px rgba(122, 56, 238, .26);
    --sh-glow-accent: 0 10px 32px rgba(230, 55, 113, .24);

    /* --- Hareket --- */
    --ease:      cubic-bezier(.22, 1, .36, 1);
    --ease-soft: cubic-bezier(.4, 0, .2, 1);
    --dur-1: 150ms;
    --dur-2: 260ms;
    --dur-3: 460ms;

    /* --- Tipografi --- */
    --font-sans: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;

    /* --- Boşluk --- */
    --sp-1: .25rem;
    --sp-2: .5rem;
    --sp-3: .75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 3rem;
    --sp-8: 4rem;

    /* ======================================================
       ESKİ DEĞİŞKENLERİN YENİ KARŞILIKLARI
       (site.css'teki bileşenler otomatik güncellenir)
       ====================================================== */
    --adk-navy:      var(--ink-900);
    --adk-navy-dark: var(--ink-950);
    --adk-purple:    var(--brand-600);
    --adk-pink:      var(--accent-500);
    --adk-magenta:   var(--accent-600);
    --adk-indigo:    var(--brand-500);
    --adk-green:     var(--ok-500);
    --adk-bg-start:  var(--accent-50);
    --adk-bg-end:    var(--brand-50);
    --adk-radius:    var(--r-md);
    --adk-shadow:    var(--sh-md);
    --adk-gradient:  var(--grad-brand);

    --kr-rose:      var(--accent-500);
    --kr-rose-soft: var(--accent-100);
    --kr-bg:        var(--accent-50);
    --kr-navy:      var(--ink-900);
}

/* ----------------------------------------------------------
   2. TEMEL
   ---------------------------------------------------------- */

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-sans);
    color: var(--text);
    letter-spacing: -.008em;
}

::selection {
    background: var(--brand-200);
    color: var(--ink-900);
}

/* Odak halkası — klavye kullanıcıları için */
:focus-visible {
    outline: 2px solid var(--brand-500);
    outline-offset: 3px;
    border-radius: var(--r-xs);
}

button:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
    outline: none;
}

/* İnce kaydırma çubuğu */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--ink-300) transparent;
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: var(--ink-300);
    border-radius: var(--r-full);
    border: 3px solid var(--canvas);
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--ink-400);
}

/* ----------------------------------------------------------
   3. TİPOGRAFİ ÖLÇEĞİ
   ---------------------------------------------------------- */

h1, h2, h3, h4, h5, h6,
.adk-section__title,
.kr-section__title,
.adk-admin-title,
.krp-title,
.shop-title,
.adk-student-title,
.adk-auth-card__title {
    font-family: var(--font-sans);
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1.2;
}

.adk-section__title,
.shop-title {
    font-size: clamp(1.7rem, 2.6vw, 2.35rem);
    color: var(--ink-900);
}

.adk-section__title--magenta {
    background: var(--grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.adk-section__subtitle,
.shop-subtitle,
.kr-section__hint {
    font-size: .95rem;
    color: var(--text-muted);
    letter-spacing: -.005em;
}

.kr-section__title {
    font-size: clamp(1.4rem, 2.2vw, 1.9rem);
    background: var(--grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.adk-admin-title,
.krp-title,
.adk-student-title {
    font-size: clamp(1.35rem, 2vw, 1.7rem);
}

/* Bölüm başlığı altı ince vurgu çizgisi */
.adk-section__title::after {
    content: '';
    display: block;
    width: 52px;
    height: 3px;
    margin: .85rem auto 0;
    border-radius: var(--r-full);
    background: var(--grad-brand);
}

/* ----------------------------------------------------------
   4. NAVBAR — cam efekti, scroll'da katılaşır
   ---------------------------------------------------------- */

.adk-navbar {
    background: rgba(18, 26, 43, .72);
    backdrop-filter: saturate(180%) blur(18px);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    box-shadow: none;
    padding: .7rem 0;
    transition: background var(--dur-2) var(--ease-soft),
                padding var(--dur-2) var(--ease-soft),
                box-shadow var(--dur-2) var(--ease-soft);
}

.adk-navbar.is-stuck {
    background: rgba(10, 15, 28, .92);
    padding: .5rem 0;
    box-shadow: 0 6px 28px rgba(0, 0, 0, .28);
}

.adk-navbar .navbar-brand {
    font-weight: 700;
    font-size: 1.02rem;
    letter-spacing: -.02em;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
}

.adk-navbar .navbar-brand::before {
    content: '';
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--grad-brand);
    box-shadow: var(--sh-glow);
    flex: 0 0 26px;
}

/* Menü bağlantıları — altı çizgili kayan vurgu */
.adk-navbar .nav-link {
    position: relative;
    color: rgba(255, 255, 255, .78);
    font-size: .855rem;
    font-weight: 500;
    padding: .5rem .85rem !important;
    border-radius: var(--r-sm);
    transition: color var(--dur-1) var(--ease-soft),
                background var(--dur-1) var(--ease-soft);
}

.adk-navbar .nav-link::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 2px;
    width: 0;
    height: 2px;
    border-radius: var(--r-full);
    background: var(--grad-brand);
    transform: translateX(-50%);
    transition: width var(--dur-2) var(--ease);
}

.adk-navbar .nav-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, .07);
}

.adk-navbar .nav-link:hover::after,
.adk-navbar .nav-link.active::after {
    width: 22px;
}

.adk-navbar .nav-link.active {
    color: #fff;
}

.adk-navbar .nav-link i {
    font-size: .78rem;
    opacity: .78;
}

/* Giriş butonu */
.adk-btn-login {
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: var(--r-full);
    color: #fff;
    font-size: .85rem;
    font-weight: 600;
    padding: .48rem 1.15rem;
    backdrop-filter: blur(8px);
    transition: transform var(--dur-1) var(--ease),
                background var(--dur-1) var(--ease-soft),
                box-shadow var(--dur-2) var(--ease-soft);
}

.adk-btn-login:hover {
    background: var(--grad-brand);
    border-color: transparent;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: var(--sh-glow);
}

.adk-navbar .navbar-toggler {
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: var(--r-sm);
    padding: .35rem .6rem;
}

/* ----------------------------------------------------------
   5. BUTON SİSTEMİ
   ---------------------------------------------------------- */

.adk-btn-gradient,
.kr-btn--rose,
.adk-btn-indigo,
.shop-submit,
.shop-add-btn,
.adk-btn-navy,
.hx-btn,
.shop-btn {
    position: relative;
    overflow: hidden;
    font-weight: 600;
    letter-spacing: -.01em;
    transition: transform var(--dur-1) var(--ease),
                box-shadow var(--dur-2) var(--ease-soft),
                filter var(--dur-1) var(--ease-soft);
}

/* Üzerine gelince parlayan ışık şeridi */
.adk-btn-gradient::before,
.kr-btn--rose::before,
.adk-btn-indigo::before,
.shop-submit::before,
.shop-add-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28), transparent);
    transition: left var(--dur-3) var(--ease);
    pointer-events: none;
}

.adk-btn-gradient:hover::before,
.kr-btn--rose:hover::before,
.adk-btn-indigo:hover::before,
.shop-submit:hover::before,
.shop-add-btn:hover::before {
    left: 130%;
}

.adk-btn-gradient {
    background: var(--grad-brand);
    border: none;
    border-radius: var(--r-sm);
    color: #fff;
    padding: .68rem 1.5rem;
    box-shadow: var(--sh-glow);
}

.adk-btn-gradient:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 14px 40px rgba(122, 56, 238, .34);
    filter: none;
}

.adk-btn-gradient:active,
.adk-btn-navy:active,
.shop-add-btn:active,
.hx-btn:active {
    transform: translateY(0);
}

.adk-btn-navy,
.shop-add-btn {
    background: var(--ink-900);
    border-radius: var(--r-sm);
    box-shadow: var(--sh-sm);
}

.adk-btn-navy:hover,
.shop-add-btn:hover {
    background: var(--ink-800);
    transform: translateY(-2px);
    box-shadow: var(--sh-md);
}

.adk-btn-dark,
.shop-btn--dark {
    background: var(--ink-900);
    border-radius: var(--r-sm);
}

.adk-btn-dark:hover,
.shop-btn--dark:hover {
    background: var(--ink-800);
    transform: translateY(-2px);
}

.kr-btn {
    border-radius: var(--r-full);
    font-weight: 600;
    box-shadow: var(--sh-sm);
}

.kr-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--sh-md);
}

.kr-btn--rose {
    background: var(--grad-brand);
    border-radius: var(--r-sm);
    box-shadow: var(--sh-glow-accent);
}

.kr-btn--rose:hover {
    box-shadow: 0 14px 40px rgba(230, 55, 113, .32);
}

.adk-btn-indigo {
    background: var(--grad-brand-alt);
    border-radius: var(--r-sm);
    box-shadow: var(--sh-sm);
}

.adk-btn-indigo:hover {
    transform: translateY(-2px);
    box-shadow: var(--sh-glow);
}

.shop-submit,
.shop-btn--green {
    background: linear-gradient(135deg, #0FA968 0%, #0C8F58 100%);
    border-radius: var(--r-sm);
    box-shadow: 0 8px 24px rgba(15, 169, 104, .26);
}

.shop-submit:hover,
.shop-btn--green:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 36px rgba(15, 169, 104, .32);
    filter: none;
}

.hx-btn {
    border-radius: var(--r-sm);
    box-shadow: var(--sh-lg);
}

/* Devre dışı butonlar */
.shop-add-btn--off,
button:disabled {
    box-shadow: none !important;
    transform: none !important;
}

/* ----------------------------------------------------------
   6. FOOTER — modern, ışıklı
   ---------------------------------------------------------- */

.adk-footer {
    position: relative;
    background: var(--ink-950);
    color: var(--ink-400);
    padding: 4rem 0 1.5rem;
    overflow: hidden;
}

/* Üstte ince gradyan çizgi */
.adk-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--grad-brand);
}

/* Arka planda yumuşak ışık */
.adk-footer::after {
    content: '';
    position: absolute;
    top: -180px;
    left: 12%;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(122, 56, 238, .22) 0%, transparent 68%);
    pointer-events: none;
}

.adk-footer .container {
    position: relative;
    z-index: 1;
}

.adk-footer h5 {
    color: #fff;
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    margin-bottom: 1.3rem;
}

.adk-footer p {
    font-size: .875rem;
    line-height: 1.8;
    color: var(--ink-400);
}

.adk-footer a {
    position: relative;
    display: inline-block;
    color: var(--ink-400);
    font-size: .885rem;
    padding: .1rem 0;
    margin-bottom: .7rem;
    transition: color var(--dur-1) var(--ease-soft),
                transform var(--dur-1) var(--ease);
}

.adk-footer a:hover {
    color: #fff;
    transform: translateX(4px);
}

.adk-footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, .08);
    margin-top: 3rem;
    padding-top: 1.5rem;
    font-size: .82rem;
    color: var(--ink-500);
}

/* Sosyal medya ikonları */
.adk-social {
    display: flex;
    gap: .55rem;
}

.adk-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .09);
    color: var(--ink-300);
    font-size: .95rem;
    margin: 0;
    transition: all var(--dur-2) var(--ease);
}

.adk-social a:hover {
    background: var(--grad-brand);
    border-color: transparent;
    color: #fff;
    transform: translateY(-3px);
    box-shadow: var(--sh-glow);
}

.adk-footer__note {
    font-size: .85rem;
    line-height: 1.8;
    color: var(--ink-500);
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

/* ----------------------------------------------------------
   7. YUMUŞAK ZEMİN — ışıklı gradyan
   ---------------------------------------------------------- */

.adk-soft-bg {
    position: relative;
    background: var(--canvas);
    overflow: hidden;
}

.adk-soft-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 12% 8%,  rgba(230, 55, 113, .10) 0%, transparent 42%),
        radial-gradient(circle at 88% 82%, rgba(122, 56, 238, .10) 0%, transparent 45%),
        var(--canvas-alt);
    pointer-events: none;
}

.adk-soft-bg > * {
    position: relative;
    z-index: 1;
}

/* ----------------------------------------------------------
   8. YARDIMCI SINIFLAR
   ---------------------------------------------------------- */

.u-gradient-text {
    background: var(--grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.u-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--line), transparent);
    border: none;
    margin: var(--sp-6) 0;
}

/* Hareket azaltma tercihi */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}