/* Arakom yazı tipi: aşağıdaki "*" kuralı Arakom istiyordu ama font hiç
   tanıtılmadığı için tarayıcı sessizce sans-serif'e düşüyordu. Artık tanıtılıyor. */
@font-face {
    font-family: 'Arakom';
    src: url('../../arakom.ttf') format('truetype');
    font-weight: normal; font-style: normal;
    font-display: swap;
}
/* Sitenin diğer sayfaları fontu küçük harfle çağırıyor; ikisi de çalışsın. */
@font-face {
    font-family: 'arakom';
    src: url('../../arakom.ttf') format('truetype');
    font-weight: normal; font-style: normal;
    font-display: swap;
}

/* AÇIK RENKLİ KURUMSAL TEMA */
:root {
    --bg-main: #f8fafc;       
    --bg-panel: #ffffff;      
    --text-dark: #0f172a;     
    --text-muted: #64748b;    
    --accent-red: #ef4444;    
    --accent-green: #10b981;  
    --accent-blue: #3b82f6;   
    --gold: #b45309;          
}

/* KESİN KURAL: Arakom Fontu ve Kalınlık Normal */
* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
    cursor: default; 
    font-family: 'Arakom', sans-serif !important;
    font-weight: normal !important; 
}

body {
    background-color: var(--bg-main);
    color: var(--text-dark);
    min-height: 100vh;
    width: 100vw;
    overflow: hidden; /* Taşmaları engelle */
    position: relative;
    touch-action: manipulation; /* Mobilde çift tıklama yakınlaştırmasını önle */
}

/* GERİ DÖNÜŞ BUTONU */
.home-link {
    position: fixed;
    top: clamp(10px, 3vh, 30px);
    left: clamp(10px, 3vw, 30px);
    width: clamp(35px, 5vw, 50px);
    height: clamp(35px, 5vw, 50px);
    background: var(--bg-panel);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,0.05);
    z-index: 1000;
    transition: all 0.2s;
    cursor: pointer !important;
}
.home-link:hover { transform: scale(1.1); background: #f1f5f9; }
.home-link svg { width: 50%; height: 50%; fill: var(--text-dark); cursor: pointer; }

/* EKRAN YÖNETİMİ */
.screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: clamp(15px, 4vw, 50px);
    z-index: 2;
}
.screen.active { display: flex; }

/* ANA SAYFA TASARIMI */
/* İlk ekran uzaktan da okunuyor: sınıfta tahtaya yansıtılıyor, öğrenci
   arka sıradan bakıyor. Bu yüzden başlık, kart yazıları ve kart
   simgeleri belirgin biçimde büyütüldü. Küçük ekranlarda clamp'in alt
   ucu devreye giriyor, taşma olmuyor. */
.intro-top { text-align: center; margin-top: clamp(6px, 4vh, 18px); }
.title-main { font-size: clamp(62px, 13vw, 152px); color: var(--accent-red); letter-spacing: -2px; margin-bottom: 5px; }
.subtitle { font-size: clamp(17px, 3.4vw, 34px); color: var(--text-muted); letter-spacing: 2px; text-transform: uppercase; }

.color-menu {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: clamp(10px, 2vw, 25px);
    width: 100%;
    max-width: 1200px;
    margin-bottom: clamp(8px, 3.5vh, 40px);
}
.color-btn {
    height: clamp(100px, 21vh, 230px);
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--bg-panel);
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
    border: 1px solid rgba(0,0,0,0.04);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer !important;
}
.color-btn:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.08); }
.color-btn i { font-size: clamp(38px, 7.5vh, 82px); margin-bottom: 10px; }
.color-btn span { font-size: clamp(18px, 3.1vh, 34px); cursor: pointer; text-align: center; padding: 0 10px; }
/* Kart simgeleri HTML'de 28×28 sabitlenmişti — o yüzden kart büyürken
   simge küçücük kalıyordu. Ölçü artık buradan, ekranla birlikte. */
.color-btn svg.custom-card-icon {
    width: clamp(42px, 8.5vh, 92px); height: clamp(42px, 8.5vh, 92px);
    margin-bottom: clamp(4px, 1.2vh, 14px); stroke-width: 1.3;
}

.btn-red { color: #dc2626; }
.btn-green { color: #16a34a; }
.btn-purple { color: #9333ea; }
.btn-blue { color: #2563eb; }

/* YARIŞMA ALANI (ARENA) */
.arena-header {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    text-align: center;
    width: 100%;
    border-bottom: 2px solid rgba(0,0,0,0.05);
    padding-bottom: clamp(5px, 2vh, 15px);
}
.arena-title { font-size: clamp(18px, 4vw, 32px); color: var(--accent-red); }
.arena-header .subtitle { font-size: clamp(14px, 3vw, 22px); position: absolute; right: 0; top: 50%; transform: translateY(-50%); margin: 0; }

.arena-workspace {
    display: flex;
    width: 100%;
    flex: 1;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

/* ÖĞRENCİ SKOR PANELİ (MOBİL İÇİN DİNAMİK) */
.student-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(10px, 2vh, 20px);
    z-index: 10;
}
.score-box {
    font-size: clamp(40px, 8vmin, 85px);
    background: var(--bg-panel);
    padding: clamp(5px, 1vh, 15px) clamp(15px, 3vw, 45px);
    border-radius: 20px;
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 8px 20px rgba(0,0,0,0.03);
    min-width: clamp(80px, 15vw, 160px);
    text-align: center;
}
/* Puan tuşları: artı ana tuş, eksi onun yanında küçük bir düzeltme tuşu */
.score-ctrl {
    display: flex;
    align-items: center;
    gap: clamp(8px, 1.8vmin, 16px);
}
.plus-btn {
    width: clamp(50px, 10vmin, 85px);
    height: clamp(50px, 10vmin, 85px);
    border-radius: 50%;
    background: var(--accent-green);
    color: white;
    font-size: clamp(25px, 5vmin, 45px);
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer !important;
    transition: transform 0.1s;
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.2);
    flex-shrink: 0;
}
.plus-btn:active { transform: scale(0.9); }

/* EKSİ (düzeltme) TUŞU — yanlışlıkla fazla verilen puanı geri alır.
   Kasıtlı olarak daha küçük ve içi boş: yanlışlıkla basılması zorlaşsın. */
.minus-btn {
    width: clamp(36px, 7vmin, 60px);
    height: clamp(36px, 7vmin, 60px);
    border-radius: 50%;
    background: var(--bg-panel);
    color: var(--accent-red);
    font-size: clamp(20px, 4vmin, 36px);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(239, 68, 68, 0.35);
    cursor: pointer !important;
    transition: transform 0.1s, background 0.2s, color 0.2s, opacity 0.2s;
    box-shadow: 0 6px 14px rgba(0,0,0,0.04);
    flex-shrink: 0;
}
.minus-btn:hover { background: var(--accent-red); color: #fff; border-color: transparent; }
.minus-btn:active { transform: scale(0.9); }
/* Puan sıfırken geri alınacak bir şey yok: tuş sönük ve tıklanamaz */
.minus-btn:disabled { opacity: 0.3; cursor: not-allowed !important; }
.minus-btn:disabled:hover { background: var(--bg-panel); color: var(--accent-red); border-color: rgba(239, 68, 68, 0.35); }
.student-label { color: var(--text-muted); font-size: clamp(12px, 2.5vmin, 18px); margin-top: 5px; }

/* MERKEZ ALAN TASARIMI */
.main-display {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 10px;
    max-width: 100%;
}

/* SORU YAPISI */
.question-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(5px, 1vh, 10px);
    width: 100%;
}

.pattern-name {
    font-size: clamp(40px, 10vmin, 100px);
    color: var(--accent-red); /* Altın rengi yerine kırmızı yapıldı */
    line-height: 1;
    opacity: 0;
    display: none;
    transition: all 0.4s;
}
.pattern-name.active { opacity: 1; }

.root-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(15px, 4vw, 40px);
    margin: clamp(5px, 1vh, 10px) 0;
    width: 100%;
}

.root-word {
    font-size: clamp(60px, 15vmin, 180px); /* JS ile de yönetiliyor */
    color: var(--text-dark);
    opacity: 0;
    display: none;
    transform: scale(0.8);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    white-space: nowrap; 
}
.root-word.active { opacity: 1; transform: scale(1); }

.pattern-num {
    font-size: clamp(30px, 8vmin, 80px);
    color: var(--accent-red); /* Altın rengi yerine kırmızı yapıldı */
    opacity: 0;
    display: none;
    transition: all 0.4s;
    flex-shrink: 0;
}
.pattern-num.active { opacity: 1; }

.hint-text {
    font-size: clamp(18px, 4.5vmin, 42px);
    color: var(--accent-blue);
    opacity: 0;
    display: none;
    margin-top: clamp(5px, 2vh, 15px);
    transition: opacity 0.5s;
    padding: 0 10px;
}
.hint-text.active { opacity: 1; }

/* BLUR MANTIĞI VE ETKİLEŞİM */
.clickable-item { cursor: pointer !important; transition: filter 0.3s, opacity 0.3s; }
.blurred { filter: blur(clamp(8px, 2vw, 20px)); opacity: 0.2; }

/* CEVAPLAR */
.answer-container { display: none; flex-direction: column; align-items: center; gap: 5px; }
.answer-ar { font-size: clamp(60px, 15vmin, 185px); color: var(--accent-green); opacity: 0; transform: scale(0.9); transition: all 0.5s; }
.answer-ar.active { opacity: 1; transform: scale(1); }
.answer-tr { font-size: clamp(24px, 6vmin, 55px); color: var(--text-dark); opacity: 0; transition: opacity 0.5s; }
.answer-tr.active { opacity: 1; }

/* ZAMANLAYICI */
.timer-track { position: absolute; top: 0; left: 0; width: 100%; height: clamp(6px, 1.5vh, 12px); background: rgba(0,0,0,0.03); }
.timer-fill { width: 0%; height: 100%; background: var(--accent-red); transition: width 1s linear; }

/* KONTROLLER */
.arena-controls {
    display: flex;
    gap: clamp(10px, 2vw, 25px);
    width: 100%;
    justify-content: center;
    border-top: 2px solid rgba(0,0,0,0.04);
    padding-top: clamp(10px, 2vh, 20px);
    flex-wrap: wrap; /* Mobilde alt alta inmesi için */
}
.btn-ui { 
    padding: clamp(10px, 2vh, 15px) clamp(20px, 4vw, 50px); 
    border-radius: 16px; 
    border: 1px solid rgba(0,0,0,0.05); 
    font-size: clamp(16px, 3.5vmin, 24px); 
    cursor: pointer !important; 
    transition: 0.2s; 
    flex: 1; /* Alanı doldur */
    max-width: 400px;
}
.btn-primary { background: var(--accent-red); color: white; box-shadow: 0 10px 20px rgba(239, 68, 68, 0.1); }
.btn-secondary { background: var(--bg-panel); color: var(--text-dark); }
.btn-ui:active { transform: scale(0.97); }

/* --- MOBİL DİKEY (PORTRAIT) ÖZEL DÜZEN --- */
@media (max-width: 768px) and (orientation: portrait) {
    .arena-workspace {
        flex-direction: column;
        justify-content: flex-start;
        padding-top: 80px; /* Skorlara yer aç */
    }
    .student-side {
        position: absolute;
        top: 10px;
        transform: scale(0.85);
        transform-origin: top;
    }
    .student-1 { left: -10px; }
    .student-2 { right: -10px; }
    .main-display { padding-top: 20px; }
    .arena-controls { flex-direction: column; }
    .btn-ui { width: 100%; max-width: 100%; flex: none; }
}

/* --- MOBİL YATAY (LANDSCAPE) ÖZEL DÜZEN --- */
@media (max-height: 500px) and (orientation: landscape) {
    .screen { padding: 10px 30px; }
    .title-main { margin-top: 5px; }
    .arena-header { padding-bottom: 5px; }
    .arena-workspace { padding: 5px 0; }
    .student-side { gap: 5px; }
    .arena-controls { padding-top: 5px; gap: 10px; }
    .btn-ui { padding: 8px 20px; border-radius: 10px; }
    .hint-text { margin-top: 5px; }
    .root-line { margin: 5px 0; }
    /* İlk ekran yatayda çok basık: başlık ve kartlar küçülür.
       (Anahtar/önizleme ölçüleri dosyanın SONUNDA — o kurallar burada
       yazılsaydı, daha altta gelen temel .setup-* kuralları onları
       ezerdi; aynı özgüllükte son yazılan kazanıyor.) */
    .intro-top { margin-top: 2px; }
    .title-main { font-size: clamp(30px, 9vh, 48px); margin-top: 0; margin-bottom: 0; }
    .subtitle { font-size: clamp(11px, 3.2vh, 15px); }
    .color-menu { margin-bottom: 6px; gap: 8px; }
    .color-btn { height: clamp(58px, 17vh, 86px); border-radius: 16px; }
    .color-btn svg.custom-card-icon {
        width: clamp(22px, 6vh, 32px); height: clamp(22px, 6vh, 32px); margin-bottom: 2px;
    }
    .color-btn span { font-size: clamp(11px, 3.2vh, 15px); }
}
/* ---- İLK SAYFADAKİ GÖSTERİM ANAHTARLARI ----
   Vezin · numara · ipucu kartta çıksın mı? Karar oyuna girmeden burada
   verilir. Renk kartlarının altında, ekranın alt şeridinde durur;
   .screen space-between olduğu için eskiden orada duran boş div'in
   yerini aldı — düzen kaymadı.

   Anahtarlar telefondaki gibi SWITCH: açıkken yeşil ve topuz sağda,
   kapalıyken gri ve topuz solda. Yanlarında ÖNİZLEME var — oyun
   ekranındaki soru kartının küçüğü; hangi ipucunun kalkacağı
   anlatılmadan görülüyor.

   EN AZ BİRİ AÇIK KALMALI: son açık anahtar kilitli (gri kulp,
   "not-allowed"), dokununca sallanıyor ve uyarı beliriyor. */
.setup-row {
    --sw-en: clamp(52px, 5.6vw, 74px);
    --sw-boy: clamp(30px, 3.2vh, 42px);
    position: relative;
    display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center;
    gap: clamp(14px, 2.6vw, 38px);
    /* Alt boşluğu .screen'in kendi dolgusu veriyor; buradaki büyük
       kenar boşluğu ilk ekranı 900px'te taşırıyordu. */
    margin-bottom: clamp(0px, .8vh, 8px);
}
.setup-anahtarlar { display: flex; flex-direction: column; gap: clamp(6px, 1.1vh, 12px); }
.setup-label {
    font-size: clamp(13px, 2.1vh, 20px); color: var(--text-muted);
    letter-spacing: .08em; text-transform: uppercase; text-align: center;
    margin-bottom: clamp(1px, .4vh, 4px);
}
.setup-toggle {
    -webkit-appearance: none; appearance: none; font: inherit; cursor: pointer !important;
    display: grid; grid-template-columns: auto 1fr auto; align-items: center;
    gap: clamp(10px, 1.4vw, 18px); text-align: left;
    min-width: clamp(238px, 27vw, 340px);
    padding: clamp(7px, 1.2vh, 13px) clamp(13px, 1.6vw, 20px);
    background: var(--bg-panel); color: var(--text-dark);
    border: 1px solid rgba(0,0,0,.06); border-radius: 999px;
    box-shadow: 0 6px 18px rgba(0,0,0,.05);
    transition: transform .18s cubic-bezier(.175,.885,.32,1.275),
                opacity .18s, box-shadow .18s, background-color .18s;
}
.setup-toggle:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(0,0,0,.08); }
.setup-toggle:active { transform: translateY(0); }
.setup-toggle:focus-visible { outline: 3px solid var(--accent-red); outline-offset: 3px; }
.setup-sim {
    font-family: 'Arakom', 'Harmattan', serif; font-size: clamp(24px, 3.4vh, 40px);
    line-height: 1; color: var(--accent-red); text-align: center;
}
.setup-sim-no {
    font-family: inherit; font-size: clamp(17px, 2.4vh, 26px); font-weight: 800;
    background: rgba(220,38,38,.1); border-radius: 10px; padding: 3px 11px;
}
.setup-ad { font-size: clamp(17px, 2.7vh, 30px); }
/* SWITCH: kulp + topuz. Topuzun yolu = kulp eni − kulp boyu. */
.setup-anahtar {
    width: var(--sw-en); height: var(--sw-boy); flex-shrink: 0;
    position: relative; border-radius: 999px; background: #cbd5e1;
    box-shadow: inset 0 2px 5px rgba(0,0,0,.12);
    transition: background-color .22s;
}
.setup-topuz {
    position: absolute; top: 3px; left: 3px;
    width: calc(var(--sw-boy) - 6px); height: calc(var(--sw-boy) - 6px);
    border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.28);
    transition: transform .24s cubic-bezier(.34,1.56,.64,1);
}
.setup-toggle[aria-pressed="true"] .setup-anahtar { background: var(--accent-green); }
.setup-toggle[aria-pressed="true"] .setup-topuz {
    transform: translateX(calc(var(--sw-en) - var(--sw-boy)));
}
/* KAPALI: sönük, üstü çizili — kartta çıkmayacağı belli olsun */
.setup-toggle.kapali {
    opacity: .42; background: transparent; box-shadow: none;
    border-style: dashed;
}
.setup-toggle.kapali .setup-ad { text-decoration: line-through; }
.setup-toggle.kapali .setup-sim { color: var(--text-muted); }
.setup-toggle.kapali .setup-sim-no { background: rgba(0,0,0,.05); }
/* KİLİTLİ: tek kalan açık anahtar kapatılamaz */
.setup-toggle.kilitli { cursor: not-allowed !important; }
.setup-toggle.kilitli .setup-anahtar { background: #94a3b8; }
.setup-toggle.kilitli:hover { transform: none; box-shadow: 0 6px 18px rgba(0,0,0,.05); }
@keyframes setupSallan {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-8px); } 40% { transform: translateX(7px); }
    60% { transform: translateX(-5px); } 80% { transform: translateX(3px); }
}
.setup-toggle.sallan { animation: setupSallan .44s ease; }
.setup-uyari {
    position: absolute; left: 50%; top: 0; transform: translate(-50%, -128%);
    font-size: clamp(13px, 1.9vh, 18px); color: var(--accent-red);
    background: rgba(239,68,68,.12); border-radius: 999px;
    padding: clamp(4px, .7vh, 8px) clamp(12px, 1.4vw, 20px);
    white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s;
}
.setup-row.uyari .setup-uyari { opacity: 1; }

/* ---- ÖNİZLEME: oyun ekranındaki soru kartının küçüğü ----
   Renkler ve dizilim arenadan birebir: vezin kırmızı, kök koyu,
   numara kırmızı, ipucu mavi. Kapatılan alan oyunda hiç çıkmadığı için
   burada da çıkmıyor (gizlenmiyor, yok). */
.setup-onizleme { display: flex; flex-direction: column; align-items: center; }
/* Başlık ölçüsü .setup-label ile aynı: iki sütunun başlıkları aynı
   hizada dursun (satır flex-start ile hizalanıyor). */
.onz-etiket {
    font-size: clamp(13px, 2.1vh, 20px); color: var(--text-muted);
    letter-spacing: .08em; text-transform: uppercase;
    margin-bottom: clamp(1px, .4vh, 4px);
}
.onz-kart {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: clamp(2px, .7vh, 7px);
    min-width: clamp(226px, 26vw, 330px); min-height: clamp(112px, 15.5vh, 180px);
    padding: clamp(9px, 1.5vh, 18px) clamp(15px, 2vw, 26px);
    background: var(--bg-panel); border: 1px solid rgba(0,0,0,.06);
    border-radius: 22px; box-shadow: 0 10px 30px rgba(0,0,0,.05);
    transition: box-shadow .3s;
}
.onz-kart.onz-degisti { box-shadow: 0 0 0 3px rgba(59,130,246,.4), 0 10px 30px rgba(0,0,0,.05); }
.onz-vezin { font-size: clamp(20px, 3.1vh, 36px); color: var(--accent-red); line-height: 1.15; }
.onz-satir { display: flex; align-items: center; justify-content: center; gap: clamp(10px, 1.6vw, 22px); }
.onz-kok { font-size: clamp(25px, 4vh, 48px); color: var(--text-dark); white-space: nowrap; }
.onz-no { font-size: clamp(16px, 2.3vh, 27px); color: var(--accent-red); }
.onz-ipucu { font-size: clamp(13px, 1.9vh, 21px); color: var(--accent-blue); text-align: center; }
.onz-kapali { display: none !important; }

/* Dar ekranda anahtar ve önizleme alt alta iner; yükseklik ölçüleri de
   küçülür ki ilk ekran hâlâ tek ekrana sığsın. Ölçüldü: 390×844'te
   içerik 844'ün altında kalıyor. */
@media (max-width: 820px) {
    .setup-row { gap: clamp(8px, 1.6vh, 14px); }
    .setup-anahtarlar { gap: clamp(5px, .9vh, 10px); }
    .setup-toggle {
        min-width: min(90vw, 330px);
        padding: clamp(5px, .9vh, 10px) clamp(12px, 4vw, 18px);
    }
    .setup-sim { font-size: clamp(20px, 2.8vh, 30px); }
    .setup-sim-no { font-size: clamp(15px, 2.1vh, 22px); }
    .setup-ad { font-size: clamp(15px, 2.2vh, 24px); }
    .setup-label, .onz-etiket { font-size: clamp(12px, 1.8vh, 16px); }
    .onz-kart {
        min-width: min(90vw, 330px); min-height: clamp(84px, 11vh, 130px);
        padding: clamp(7px, 1.1vh, 13px) clamp(13px, 2vw, 22px);
    }
    .onz-vezin { font-size: clamp(18px, 2.5vh, 28px); }
    .onz-kok { font-size: clamp(23px, 3.3vh, 38px); }
    .onz-no { font-size: clamp(15px, 2vh, 22px); }
    .onz-ipucu { font-size: clamp(12px, 1.7vh, 18px); }
    .title-main { font-size: clamp(46px, 11vw, 92px); }
    /* 360×640 gibi kısa telefonlarda 13vh hâlâ 13px taşırıyordu (ölçüldü) */
    .color-menu { margin-bottom: clamp(6px, 2.5vh, 30px); }
    .color-btn { height: clamp(72px, 11.5vh, 150px); }
    .color-btn svg.custom-card-icon {
        width: clamp(32px, 5.8vh, 56px); height: clamp(32px, 5.8vh, 56px);
        margin-bottom: clamp(2px, .7vh, 8px);
    }
    .color-btn span { font-size: clamp(15px, 2.4vh, 24px); }
}
/* Yatay telefon: yükseklik yok, genişlik bol — anahtar sütunuyla
   önizleme yan yana kalsın diye ölçüler sabitleniyor. Bu blok dosyanın
   SONUNDA: yukarıdaki temel .setup-* kuralları aynı özgüllükte olduğu
   için, orta kısımdaki landscape bloğunda yazılsaydı ezilirdi. */
@media (max-height: 500px) and (orientation: landscape) {
    .setup-row { --sw-en: 46px; --sw-boy: 26px; gap: 16px; margin-bottom: 4px; }
    .setup-anahtarlar { gap: 4px; }
    .setup-label, .onz-etiket { font-size: 11px; margin-bottom: 1px; }
    .setup-toggle { min-width: 208px; padding: 4px 12px; gap: 8px; }
    .setup-sim { font-size: 18px; }
    .setup-sim-no { font-size: 13px; padding: 1px 7px; }
    .setup-ad { font-size: 14px; }
    .onz-kart {
        min-width: 200px; min-height: 76px; padding: 6px 12px;
        border-radius: 14px; gap: 1px;
    }
    .onz-vezin { font-size: 15px; } .onz-kok { font-size: 20px; }
    .onz-no { font-size: 13px; } .onz-ipucu { font-size: 11px; }
    .setup-uyari { font-size: 11px; padding: 3px 10px; }
}
/* Her ihtimale karşı: içerik yine de sığmazsa ilk ekran kaydırılabilsin,
   hiçbir anahtar ekranın dışında kalmasın. */
#screen-intro { overflow-y: auto; -webkit-overflow-scrolling: touch; }