* { margin: 0; padding: 0; box-sizing: border-box; }

        :root {
            --gold:         #e8c060;
            --gold-light:   #f2d88a;
            --gold-dark:    #c09840;
            --text:         #eef4ff;
            --text-dim:     #b8d4f0;
            --gold-glow:    0 0 36px rgba(232,192,96,0.45);

            /* Hero/banner degiskenleri (saglik.html ile birebir ayni) */
            --ink:        #0d1b2a;
            --ink-soft:   #42566b;
            --ring:       rgba(13,27,42,.08);
            --grid-line:  rgba(13,27,42,.045);
            --hero-pill:  rgba(255,255,255,.72);
            --shadow-1:   0 1px 2px rgba(13,27,42,.06);
        }
        html[data-theme="dark"] {
            --ink:        #eaf2fb;
            --ink-soft:   #9fb3c8;
            --ring:       rgba(255,255,255,.10);
            --grid-line:  rgba(255,255,255,.045);
            --hero-pill:  rgba(255,255,255,.08);
        }

        html, body { height: 100%; }

        body {
            font-family: 'Inter', system-ui, sans-serif;
            background:
                radial-gradient(ellipse 72% 52% at 10% 0%, rgba(255,236,170,.44), transparent 58%),
                radial-gradient(ellipse 68% 48% at 92% 8%, rgba(125,211,252,.30), transparent 54%),
                radial-gradient(ellipse 62% 44% at 50% 100%, rgba(244,196,48,.20), transparent 58%),
                linear-gradient(165deg, #fff9e8 0%, #e8f7ff 48%, #f8edbf 100%);
            color: #102a43;
            /* TEK EKRAN: toolbar.css body'ye padding-top:toolbar ekliyor; border-box
               sayesinde icerik alani = 100svh - toolbar. Kaymaz, tasmaz. */
            height: 100vh;
            height: 100svh;
            overflow: hidden;
        }

        /* ---- Arka plan: saglik ile ayni yumusak isik + ince izgara ---- */
        .sk-bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
        .sk-bg::before{
            content:"";position:absolute;inset:-20%;
            background:
                radial-gradient(42% 52% at 16% 18%, rgba(250,204,21,.34), transparent 62%),
                radial-gradient(38% 46% at 84% 14%, rgba(14,165,233,.24), transparent 60%),
                radial-gradient(46% 50% at 80% 88%, rgba(245,158,11,.30), transparent 62%),
                radial-gradient(50% 55% at 14% 90%, rgba(20,184,166,.18), transparent 62%);
            filter:blur(10px);
        }
        html[data-theme="dark"] .sk-bg::before{opacity:.55}
        .sk-bg::after{
            content:"";position:absolute;inset:0;
            background-image:
                linear-gradient(var(--grid-line) 1px,transparent 1px),
                linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
            background-size:clamp(34px,5vw,60px) clamp(34px,5vw,60px);
            -webkit-mask-image:radial-gradient(120% 100% at 50% 30%,#000 55%,transparent 100%);
            mask-image:radial-gradient(120% 100% at 50% 30%,#000 55%,transparent 100%);
        }

        /* ---- Sayfa govdesi: TEK EKRAN flex-kolon (saglik mantigi) ----
           Hero kendi boyunu alir (cakili), grid kalan tum yuksekligi alir. */
        .sk-page{
            position:relative;z-index:1;
            height:calc(100svh - var(--toolbar-height,64px));
            overflow:hidden;
            display:flex;flex-direction:column;align-items:stretch;
            gap:clamp(6px,1.4vh,16px);
            padding:clamp(6px,1.4vh,14px) clamp(12px,3vw,40px) clamp(8px,1.6vh,18px);
        }

        /* ---- Hero (saglik.html ile birebir ayni banner) ---- */
        .sk-hero{flex:0 0 auto;width:100%;max-width:980px;text-align:center;margin:0 auto}
        .sk-badge{
            display:inline-flex;align-items:center;gap:8px;
            padding:7px 16px;border-radius:999px;
            background:var(--hero-pill);border:1px solid var(--ring);
            backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
            font-weight:700;font-size:clamp(11px,1.4vw,13px);letter-spacing:.14em;
            color:var(--ink-soft);text-transform:uppercase;
            box-shadow:var(--shadow-1);
        }
        .sk-badge svg{width:15px;height:15px;color:#0ea5e9}
        .sk-eyebrow{
            margin:clamp(2px,0.6vh,6px) 0 1px;
            font-family:'Plus Jakarta Sans','Inter',sans-serif;font-weight:600;
            font-size:clamp(8px, min(1.4vw, 1.9vh), 14px);
            letter-spacing:.04em;color:var(--ink-soft);
        }
        .sk-title-row{
            display:inline-flex;align-items:center;justify-content:center;
            gap:clamp(10px,min(2.2vw,3vh),28px);
            max-width:100%;margin:0 auto;
        }
        .sk-title{
            margin:0;font-family:'Plus Jakarta Sans','Inter',sans-serif;font-weight:800;
            font-size:clamp(15px, min(4vw, 5.5vh), 40px);
            line-height:1.04;letter-spacing:-.02em;
            background:linear-gradient(120deg,#17365d 0%,#0d9488 38%,#b8860b 72%,#7c5a10 100%);
            -webkit-background-clip:text;
            background-clip:text;
            -webkit-text-fill-color:transparent;
            text-shadow:0 2px 10px rgba(255,255,255,.46);
            text-wrap:balance;
            flex:0 1 auto;min-width:0;
        }
        .sk-tip{
            flex:0 0 auto;display:block;
            width:clamp(36px,min(7.2vw,10vh),92px);
            height:auto;aspect-ratio:1;object-fit:contain;
            filter:drop-shadow(0 1px 2px rgba(13,27,42,.14));
            user-select:none;-webkit-user-drag:none;pointer-events:none;
        }
        .sk-tip--right{transform:scaleX(-1)}
        html[data-theme="dark"] .sk-tip{filter:drop-shadow(0 1px 3px rgba(0,0,0,.35))}
        .sk-title .accent{
            background:linear-gradient(120deg,#facc15,#d4a017 55%,#8a5a00);
            -webkit-background-clip:text;
            background-clip:text;
            -webkit-text-fill-color:transparent;
            color:transparent;
            filter:drop-shadow(0 1px 5px rgba(212,160,23,.28));
        }
        .sk-sub{
            margin:clamp(2px,.7vh,9px) auto 0;max-width:52ch;
            font-size:clamp(9px, min(1.3vw, 1.8vh), 14px);
            line-height:1.35;color:var(--ink-soft);text-wrap:pretty;
        }

        @keyframes shimmer {
            0%   { background-position: -200% 0; }
            100% { background-position: 200% 0; }
        }

        @property --ba {
            syntax: '<angle>';
            inherits: false;
            initial-value: 0deg;
        }
        @keyframes goldSpin { to { --ba: 360deg; } }

        /* 12 kart - her cihazda/yonelimde tamami ekrana sigar (tasma/kirpma yok).
           Kart genisligi hem viewport genisligine hem yuksekligine gore kisitlanir:
           min(vw, vh) -> genis-kisa ekranda yukseklik, dar-uzun ekranda genislik belirler. */
        .grid {
            flex: 1 1 auto;
            min-height: 0;
            display: grid;
            grid-template-columns: repeat(6, var(--card-w));
            justify-content: center;
            align-content: center;
            gap: var(--card-gap);
            width: 100%;
            max-width: 1120px;
            margin: 0 auto;
            perspective: 1800px;
            /* vh payi hero icin biraz dusuruldu; min(vw,vh) -> her cihaz/yonde sigar */
            --card-w: clamp(72px, min(13vw, 22vh), 140px);
            --card-gap: clamp(10px, 1.4vw, 18px);
        }

        .exam-card {
            position: relative;
            border-radius: 20px;
            overflow: visible;
            background:
                linear-gradient(145deg,
                    rgba(255,255,255,.18) 0%,
                    rgba(200,230,255,.12) 40%,
                    rgba(255,255,255,.06) 100%),
                linear-gradient(135deg,
                    #1e3a6e 0%,
                    #264d8a 25%,
                    #2e5fa0 50%,
                    #264d8a 75%,
                    #1e3a6e 100%);
            border: 1.5px solid rgba(180,215,255,0.35);
            cursor: pointer;
            text-decoration: none;
            color: inherit;
            display: flex;
            flex-direction: column;
            align-items: center;
            transition: transform .5s cubic-bezier(.34,1.56,.64,1),
                        box-shadow .4s ease,
                        border-color .3s ease;
            transform-style: preserve-3d;
            aspect-ratio: 3 / 4;
            box-shadow:
                0 12px 40px rgba(10,30,60,.35),
                0 4px 12px rgba(10,30,60,.2),
                inset 0 1px 0 rgba(255,255,255,.15),
                inset 0 -2px 6px rgba(0,0,0,.15);
        }

        .exam-card::before {
            content: '';
            position: absolute; top: 0; left: 0; right: 0; height: 50%;
            background: linear-gradient(180deg,
                rgba(255,255,255,.12) 0%,
                rgba(255,255,255,.03) 60%,
                transparent 100%);
            border-radius: 20px 20px 0 0;
            pointer-events: none; z-index: 1;
        }

        .exam-card::after {
            content: '';
            position: absolute; inset: -2px; border-radius: 22px;
            padding: 2px;
            background: conic-gradient(from var(--ba),
                transparent 0deg,
                rgba(232,192,96,0) 10deg,
                rgba(232,192,96,.85) 30deg,
                rgba(255,225,140,1) 50deg,
                rgba(100,180,255,.6) 70deg,
                transparent 90deg,
                transparent 320deg,
                rgba(232,192,96,.3) 345deg,
                transparent 360deg
            );
            -webkit-mask: linear-gradient(#000 0 0) content-box,
                          linear-gradient(#000 0 0);
            -webkit-mask-composite: xor;
                    mask-composite: exclude;
            opacity: 0;
            transition: opacity .5s ease;
            animation: goldSpin 4s linear infinite;
            pointer-events: none;
        }

        .exam-card.active::after {
            opacity: .7;
            animation: goldSpin 2s linear infinite;
        }

        .exam-card.active {
            background:
                linear-gradient(145deg,
                    rgba(255,255,255,.22) 0%,
                    rgba(200,230,255,.15) 40%,
                    rgba(255,255,255,.08) 100%),
                linear-gradient(135deg,
                    #1e4080 0%,
                    #2a5da8 30%,
                    #3570c0 50%,
                    #2a5da8 70%,
                    #1e4080 100%);
            border-color: rgba(232,192,96,.5);
            box-shadow:
                0 16px 50px rgba(10,30,60,.4),
                0 6px 16px rgba(10,30,60,.2),
                0 0 40px rgba(232,192,96,.15),
                inset 0 1px 0 rgba(255,255,255,.2),
                inset 0 -2px 6px rgba(0,0,0,.12);
        }

        .exam-card.active:hover {
            transform: translateY(-12px) rotateX(5deg) scale(1.06);
            border-color: rgba(232,192,96,.7);
            box-shadow:
                0 28px 60px rgba(10,30,60,.5),
                0 8px 20px rgba(10,30,60,.25),
                var(--gold-glow),
                0 0 60px rgba(100,180,255,.15),
                inset 0 1px 0 rgba(255,255,255,.25);
        }
        .exam-card.active:hover::after { opacity: 1; }

        .card-cover {
            width: 100%; flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 18px 0 10px;
            position: relative;
        }
        .card-cover img {
            width: 62px; height: 62px;
            border-radius: 50%;
            object-fit: cover;
            display: block;
            border: 2.5px solid rgba(232,192,96,.45);
            box-shadow:
                0 6px 18px rgba(0,0,0,.4),
                0 0 0 3px rgba(30,80,160,.2),
                inset 0 1px 0 rgba(255,255,255,.2);
            transition: transform .45s ease, box-shadow .35s ease;
        }
        .exam-card.active:hover .card-cover img {
            transform: scale(1.12) rotateZ(3deg);
            box-shadow:
                0 8px 24px rgba(0,0,0,.5),
                0 0 0 4px rgba(232,192,96,.4);
        }
        .card-cover-placeholder {
            width: 62px; height: 62px;
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            background: linear-gradient(160deg, rgba(30,70,140,.6) 0%, rgba(15,35,80,.8) 100%);
            font-size: 1.8rem;
            border: 2.5px solid rgba(100,150,220,.25);
            box-shadow: 0 4px 14px rgba(0,0,0,.35);
        }

        .card-foot {
            width: 100%;
            padding: 10px 12px 14px;
            background: linear-gradient(0deg,
                rgba(15,30,65,.92) 0%,
                rgba(25,50,95,.82) 50%,
                rgba(35,65,120,.7) 100%);
            text-align: center;
            position: relative; z-index: 2;
            flex-shrink: 0;
            border-top: 1px solid rgba(255,255,255,.08);
            border-radius: 0 0 20px 20px;
        }
        .card-label {
            font-size: .65rem;
            font-weight: 700;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--text-dim);
            line-height: 1;
            margin-bottom: 4px;
        }
        .card-numeral {
            font-size: 1.5rem;
            font-weight: 900;
            font-family: 'JetBrains Mono', monospace;
            letter-spacing: -0.5px;
            background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 55%, var(--gold-dark) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            line-height: 1.1;
            filter: drop-shadow(0 1px 2px rgba(0,0,0,.4));
        }

        .card-badge-active {
            position: absolute;
            top: 10px; right: 10px; z-index: 3;
            background: linear-gradient(135deg, var(--gold-light), var(--gold-dark));
            color: #0a1628;
            font-size: .5rem;
            font-weight: 900;
            letter-spacing: 1.2px;
            text-transform: uppercase;
            padding: 3px 8px;
            border-radius: 99px;
            box-shadow: 0 3px 10px rgba(232,192,96,.4);
        }

        /* -- RESPONSIVE: hero + 12 kart her zaman tek ekrana sigar - */
        /* >=961px : 6 sutun x 2 satir */

        /* tablet / kucuk laptop : 4 sutun x 3 satir */
        @media (max-width: 960px) {
            .grid {
                grid-template-columns: repeat(4, var(--card-w));
                max-width: 720px;
                --card-w: clamp(66px, min(20vw, 14.5vh), 130px);
                --card-gap: clamp(10px, 1.8vw, 16px);
            }
        }

        /* telefon : 3 sutun x 4 satir */
        @media (max-width: 560px) {
            .grid {
                grid-template-columns: repeat(3, var(--card-w));
                max-width: 460px;
                --card-w: clamp(60px, min(28vw, 12vh), 140px);
                --card-gap: clamp(9px, 2.4vw, 14px);
            }
        }

        /* YATAY kisa ekran (telefon landscape): hero kompakt + 6x2 -> tamami sigar */
        @media (orientation: landscape) and (max-height: 600px) {
            .grid {
                grid-template-columns: repeat(6, var(--card-w));
                max-width: 1120px;
                --card-w: clamp(46px, min(11vw, 16vh), 110px);
                --card-gap: clamp(6px, 1.2vw, 12px);
            }
            .sk-page{ gap:clamp(3px,.8vh,8px); }
            .sk-badge{ padding:3px 11px; font-size:clamp(9px,1.7vh,12px); }
            .sk-badge svg{ width:12px; height:12px; }
            .sk-eyebrow{ margin:2px 0 0; font-size:clamp(8px,1.5vh,11px); }
            .sk-title{ font-size:clamp(14px,4.2vh,24px); }
            .sk-tip{ width:clamp(24px,6vh,40px); }
            .sk-sub{ margin-top:2px; font-size:clamp(8px,1.5vh,11px); line-height:1.2; }
        }