/* auth/login.php */
:root{
            --marka:#F26B0F;          /* turuncu */
            --marka-koyu:#D2540A;
            --marka-acik:#FF8A3D;
            --marka-soluk:#FFF4EA;
            --antrasit:#1B222B;      /* antrasit */
            --antrasit-2:#242D38;
            --antrasit-3:#2E3945;
            --gri-900:#2B3138;
            --gri-700:#5A6472;
            --gri-500:#8A94A2;
            --gri-300:#D7DCE3;
            --gri-200:#E7EAEF;
            --gri-100:#F2F4F7;
            --beyaz:#FFFFFF;
            --yesil:#12A150;
            --kirmizi:#D92D20;
            --g radius:14px;
        }
        *{margin:0;padding:0;box-sizing:border-box}
        html,body{height:100%}
        body{
            font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
            background:var(--gri-100); color:var(--gri-900);
            -webkit-font-smoothing:antialiased;
        }
        .kabuk{display:flex;min-height:100vh;width:100%;align-items:stretch}

        /* ───────── SOL: ANTRASİT BLOK ───────── */
        .sol{
            flex:1 1 58%; position:relative; overflow:hidden;
            background:
                radial-gradient(1100px 620px at 88% 42%, rgba(242,107,15,.20) 0%, rgba(242,107,15,0) 62%),
                linear-gradient(150deg, #222B36 0%, var(--antrasit) 45%, #141A22 100%);
            color:var(--beyaz);
            display:flex; align-items:center;
            padding:clamp(22px,3.1vh,52px) clamp(30px,4.2vw,80px);
        }
        .sol::after{ /* ince kenar çizgisi */
            content:''; position:absolute; inset:0;
            background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
                             linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
            background-size:64px 64px; pointer-events:none;
        }
        .lastik{
            position:absolute; right:-140px; top:50%; transform:translateY(-50%);
            width:min(620px,62%); aspect-ratio:1; opacity:.09; pointer-events:none;
        }
        .sol-ic{position:relative; z-index:2; max-width:600px; width:100%}

        .marka{display:flex; align-items:center; gap:11px; margin-bottom:clamp(15px,3vh,34px)}
        .marka-logo{
            width:clamp(36px,5.2vh,46px); height:clamp(36px,5.2vh,46px); border-radius:12px; flex:0 0 auto;
            background:linear-gradient(135deg,var(--marka-acik),var(--marka-koyu));
            display:flex; align-items:center; justify-content:center;
            font-weight:800; font-size:clamp(1.05rem,2vh,1.35rem); color:#fff;
            box-shadow:0 8px 22px rgba(242,107,15,.42);
        }
        .marka-logo-img{
            width:clamp(36px,5.2vh,46px); height:clamp(36px,5.2vh,46px); border-radius:12px;
            object-fit:contain; background:#fff; padding:3px; flex:0 0 auto;
        }
        .marka-yazi{font-weight:800; font-size:clamp(1rem,2vh,1.28rem); letter-spacing:-.3px}
        .marka-yazi small{display:block; font-weight:500; font-size:clamp(.6rem,1.05vh,.68rem);
            letter-spacing:2.2px; text-transform:uppercase; color:rgba(255,255,255,.52); margin-top:2px}

        .rozet{
            display:inline-flex; align-items:center; gap:9px;
            background:rgba(242,107,15,.13); border:1px solid rgba(242,107,15,.38);
            color:#FFC79B; font-size:.775rem; font-weight:600; letter-spacing:.2px;
            padding:clamp(5px,.9vh,7px) clamp(11px,1.7vw,15px); border-radius:999px;
            margin-bottom:clamp(13px,2.2vh,26px);
        }
        .rozet i{font-size:.85rem}

        .baslik{
            font-size:clamp(1.5rem,1.6vw + 1.5vh,2.4rem); line-height:1.14; font-weight:800;
            letter-spacing:-.9px; margin-bottom:clamp(11px,1.9vh,20px);
        }
        .baslik em{font-style:normal; color:var(--marka-acik)}
        .baslik .vurgu{
            background:linear-gradient(180deg,transparent 62%,rgba(242,107,15,.35) 62%);
        }
        .aciklama{
            font-size:clamp(.86rem,1.6vh,1.0125rem); line-height:1.62; color:rgba(255,255,255,.68);
            max-width:492px; margin-bottom:clamp(16px,2.7vh,32px);
        }
        .ozellikler{list-style:none; display:flex; flex-direction:column;
            gap:clamp(8px,1.4vh,14px); margin-bottom:clamp(18px,3.1vh,40px)}
        .ozellikler li{display:flex; align-items:flex-start; gap:12px;
            font-size:clamp(.8rem,1.5vh,.945rem); color:rgba(255,255,255,.86)}
        .ozellikler .onay{
            flex:0 0 auto; width:clamp(19px,2.7vh,23px); height:clamp(19px,2.7vh,23px);
            border-radius:50%; margin-top:1px;
            background:rgba(242,107,15,.16); border:1px solid rgba(242,107,15,.42);
            color:var(--marka-acik); display:flex; align-items:center; justify-content:center;
            font-size:clamp(.6rem,1.1vh,.7rem);
        }
        .istatistik{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; max-width:520px}
        .istatistik .kutu{
            background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.11);
            border-radius:var(--r); padding:clamp(10px,1.7vh,16px) clamp(11px,1.6vw,17px);
        }
        .istatistik .deger{font-size:clamp(1rem,2vh,1.32rem); font-weight:800;
            letter-spacing:-.5px; margin-bottom:2px}
        .istatistik .deger i{font-size:.9em; color:var(--marka-acik); margin-left:4px}
        .istatistik .etiket{font-size:clamp(.66rem,1.2vh,.735rem); color:rgba(255,255,255,.5); line-height:1.35}

        /* ───────── SAĞ: BEYAZ FORM ───────── */
        .sag{
            flex:0 0 clamp(400px,35vw,480px); width:clamp(400px,35vw,480px); background:var(--beyaz);
            display:flex; align-items:center; justify-content:center;
            padding:clamp(22px,3.1vh,52px) clamp(24px,3.2vw,52px);
        }
        .form-kutu{width:100%; max-width:376px}
        .form-ust{display:flex; align-items:center; justify-content:space-between;
            margin-bottom:clamp(16px,2.8vh,32px)}
        .form-ust .mini{font-size:.72rem; color:var(--gri-500); letter-spacing:1.6px; text-transform:uppercase; font-weight:600}
        .sifre-degistir{
            font-size:.795rem; color:var(--marka); text-decoration:none; font-weight:600;
            border-bottom:1px solid rgba(242,107,15,.35); padding-bottom:1px;
        }
        .sifre-degistir:hover{color:var(--marka-koyu); border-color:var(--marka-koyu)}

        h1.mrp{font-size:clamp(1.45rem,1vw + 1.4vh,1.86rem); font-weight:800;
            letter-spacing:-.6px; color:var(--antrasit); margin-bottom:clamp(4px,.9vh,7px)}
        .mrp-alt{font-size:clamp(.84rem,1.6vh,.925rem); color:var(--gri-700);
            margin-bottom:clamp(15px,2.4vh,26px)}

        .uyari{
            display:flex; align-items:flex-start; gap:11px;
            border-radius:12px; padding:clamp(10px,1.5vh,13px) 15px; font-size:clamp(.8rem,1.5vh,.865rem);
            line-height:1.55; margin-bottom:clamp(14px,2vh,20px); border:1px solid;
        }
        .uyari i{font-size:1.02rem; margin-top:1px; flex:0 0 auto}
        .uyari.hata{background:#FEF3F2; border-color:#FECDCA; color:#912018}
        .uyari.bilgi{background:#F0F6FF; border-color:#C9DCFF; color:#1849A9}
        .uyari.basari{background:#ECFDF3; border-color:#ABEFC6; color:#05603A}

        .alan{margin-bottom:clamp(12px,1.9vh,18px)}
        .alan > label{
            display:flex; align-items:center; justify-content:space-between; gap:10px;
            font-size:clamp(.74rem,1.4vh,.795rem); font-weight:600; color:var(--gri-700); margin-bottom:clamp(6px,1.1vh,8px);
        }
        .alan .baginti{font-weight:600; font-size:.775rem; color:var(--marka); text-decoration:none}
        .alan .baginti:hover{text-decoration:underline}
        .girdi{position:relative}
        .girdi > i.ikon{
            position:absolute; left:15px; top:50%; transform:translateY(-50%);
            color:var(--gri-500); font-size:1.02rem; pointer-events:none; transition:color .18s;
        }
        .girdi input{
            width:100%; height:clamp(44px,6.6vh,52px); padding:0 15px 0 44px;
            border:1.5px solid var(--gri-200); border-radius:12px;
            background:var(--gri-100); color:var(--antrasit);
            font-size:clamp(.87rem,1.6vh,.945rem); font-family:inherit; outline:none; transition:all .18s;
        }
        .girdi input::placeholder{color:var(--gri-500)}
        .girdi input:hover{border-color:var(--gri-300)}
        .girdi input:focus{
            background:var(--beyaz); border-color:var(--marka);
            box-shadow:0 0 0 4px rgba(242,107,15,.13);
        }
        .girdi input:focus + i.ikon,
        .girdi:focus-within > i.ikon{color:var(--marka)}
        .girdi.sifre input{padding-right:50px}
        .gizle{
            position:absolute; right:6px; top:50%; transform:translateY(-50%);
            width:38px; height:38px; border:none; background:transparent; cursor:pointer;
            color:var(--gri-500); border-radius:9px; display:flex; align-items:center; justify-content:center;
            font-size:1.02rem; transition:all .15s;
        }
        .gizle:hover{background:var(--gri-100); color:var(--gri-900)}

        .beni-hatirla{display:flex; align-items:center; gap:9px; font-size:clamp(.78rem,1.45vh,.83rem);
            color:var(--gri-700); margin:0 0 clamp(13px,2.2vh,22px); cursor:pointer; user-select:none}
        .beni-hatirla input{width:16px; height:16px; accent-color:var(--marka); cursor:pointer; margin:0}

        .giris-btn{
            width:100%; height:clamp(48px,7vh,54px); border:none; border-radius:12px; cursor:pointer;
            background:linear-gradient(135deg,var(--marka-acik),var(--marka) 55%,var(--marka-koyu));
            color:#fff;             font-size:clamp(.92rem,1.7vh,1.005rem); font-weight:700; font-family:inherit;
            display:flex; align-items:center; justify-content:center; gap:9px;
            box-shadow:0 10px 24px rgba(242,107,15,.30);
            transition:transform .15s, box-shadow .18s, filter .18s;
        }
        .giris-btn:hover{transform:translateY(-2px); box-shadow:0 14px 30px rgba(242,107,15,.40); filter:brightness(1.04)}
        .giris-btn:active{transform:translateY(0)}
        .giris-btn:disabled{opacity:.65; cursor:not-allowed; transform:none}

        .ayirici{display:flex; align-items:center; gap:13px;
            margin:clamp(13px,2.2vh,24px) 0 clamp(11px,1.8vh,18px); color:var(--gri-500); font-size:.76rem}
        .ayirici::before,.ayirici::after{content:''; flex:1; height:1px; background:var(--gri-200)}

        .destek{
            display:flex; align-items:center; gap:12px;
            padding:clamp(10px,1.6vh,14px) 15px;
            background:var(--marka-soluk); border:1px solid #FFE0C7; border-radius:12px;
            font-size:clamp(.76rem,1.45vh,.815rem); color:#8A4310; line-height:1.5;
        }
        .destek i{font-size:1.1rem; color:var(--marka); flex:0 0 auto}
        .destek a{color:var(--marka-koyu); font-weight:600; text-decoration:none}

        .telif{text-align:center; margin-top:clamp(14px,2.3vh,28px);
            font-size:.755rem; color:var(--gri-500); line-height:1.7}
        .telif a{color:var(--gri-700); text-decoration:none; font-weight:600}
        .telif a:hover{color:var(--marka)}

        @media (max-width:1100px){
            .sol{flex:1 1 50%}
        }
        /* Kısa ekranlarda kaydırma çubuğu hiç oluşmasın. */
        @media (min-width:901px) and (max-height:660px){
            .istatistik{display:none}
            .aciklama{-webkit-line-clamp:2}
        }
        @media (min-width:901px) and (max-height:560px){
            .ayirici,.destek,.telif{display:none}
            .aciklama{display:none}
            .ozellikler{margin-bottom:0}
        }
        @media (max-width:900px){
            .kabuk{flex-direction:column}
            .sol{flex:0 0 auto; width:100%; padding:clamp(26px,4vh,38px) 26px clamp(30px,5vh,42px)}
            .lastik{display:none}
            .istatistik{grid-template-columns:repeat(3,1fr); max-width:none}
            .sag{flex:1 1 auto; width:100%; padding:40px 24px 52px}
        }
        @media (max-width:420px){
            .istatistik{grid-template-columns:1fr; gap:9px}
            .istatistik .kutu{display:flex; align-items:baseline; gap:9px; padding:12px 15px}
            .istatistik .deger{margin-bottom:0}
        }

/* auth/sifre-unuttum.php */
:root{
            --marka:#F26B0F; --marka-koyu:#D2540A; --marka-acik:#FF8A3D; --marka-soluk:#FFF4EA;
            --antrasit:#1B222B; --gri-900:#2B3138; --gri-700:#5A6472; --gri-500:#8A94A2;
            --gri-300:#D7DCE3; --gri-200:#E7EAEF; --gri-100:#F2F4F7; --beyaz:#fff;
        }
        *{margin:0;padding:0;box-sizing:border-box}
        body{
            font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; background:var(--gri-100);
            color:var(--gri-900); min-height:100vh; display:flex; -webkit-font-smoothing:antialiased;
        }
        .sol{
            flex:1 1 52%; position:relative; overflow:hidden; color:#fff; display:flex; align-items:center;
            padding:56px clamp(36px,4.6vw,72px);
            background:
                radial-gradient(900px 560px at 84% 40%, rgba(242,107,15,.20) 0%, rgba(242,107,15,0) 62%),
                linear-gradient(150deg,#222B36 0%, var(--antrasit) 48%, #141A22 100%);
        }
        .sol::after{
            content:''; position:absolute; inset:0; pointer-events:none;
            background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
                             linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
            background-size:64px 64px;
        }
        .sol-ic{position:relative; z-index:2; max-width:460px}
        .marka{display:flex; align-items:center; gap:12px; margin-bottom:30px}
        .marka-logo{
            width:46px; height:46px; border-radius:13px; background:linear-gradient(135deg,var(--marka-acik),var(--marka-koyu));
            display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1.35rem; color:#fff;
            box-shadow:0 8px 22px rgba(242,107,15,.42);
        }
        .marka-yazi{font-weight:800; font-size:1.28rem; letter-spacing:-.3px}
        .marka-yazi small{display:block; font-weight:500; font-size:.68rem; letter-spacing:2.4px;
            text-transform:uppercase; color:rgba(255,255,255,.52); margin-top:2px}
        .sol h2{font-size:clamp(1.7rem,2.9vw,2.45rem); font-weight:800; letter-spacing:-.9px; line-height:1.18; margin-bottom:16px}
        .sol h2 em{font-style:normal; color:var(--marka-acik)}
        .sol p{font-size:1rem; line-height:1.72; color:rgba(255,255,255,.66)}
        .sag{
            flex:0 0 470px; width:470px; background:var(--beyaz); display:flex; align-items:center;
            justify-content:center; padding:56px clamp(26px,3.2vw,50px);
        }
        .kutu{width:100%; max-width:376px}
        .geri{
            display:inline-flex; align-items:center; gap:8px; font-size:.815rem; font-weight:600;
            color:var(--gri-700); text-decoration:none; margin-bottom:30px;
        }
        .geri:hover{color:var(--marka)}
        h1{font-size:1.8rem; font-weight:800; letter-spacing:-.7px; color:var(--antrasit); margin-bottom:7px}
        .alt{font-size:.925rem; color:var(--gri-700); margin-bottom:26px; line-height:1.6}
        .uyari{
            display:flex; align-items:flex-start; gap:11px; border-radius:12px; padding:13px 15px;
            font-size:.865rem; line-height:1.55; margin-bottom:20px; border:1px solid;
        }
        .uyari i{font-size:1.02rem; margin-top:1px; flex:0 0 auto}
        .uyari.basari{background:#ECFDF3; border-color:#ABEFC6; color:#05603A}
        .uyari.bilgi{background:#F0F6FF; border-color:#C9DCFF; color:#1849A9}
        .alan{margin-bottom:18px}
        .alan label{display:block; font-size:.795rem; font-weight:600; color:var(--gri-700); margin-bottom:8px}
        .girdi{position:relative}
        .girdi > i{position:absolute; left:15px; top:50%; transform:translateY(-50%); color:var(--gri-500); font-size:1.02rem}
        .girdi input{
            width:100%; height:52px; padding:0 15px 0 44px; border:1.5px solid var(--gri-200);
            border-radius:12px; background:var(--gri-100); color:var(--antrasit); font-size:.945rem;
            font-family:inherit; outline:none; transition:all .18s;
        }
        .girdi input:focus{background:#fff; border-color:var(--marka); box-shadow:0 0 0 4px rgba(242,107,15,.13)}
        .btn{
            width:100%; height:54px; border:none; border-radius:12px; cursor:pointer; margin-top:6px;
            background:linear-gradient(135deg,var(--marka-acik),var(--marka) 55%,var(--marka-koyu)); color:#fff;
            font-size:1.005rem; font-weight:700; font-family:inherit; display:flex; align-items:center;
            justify-content:center; gap:9px; box-shadow:0 10px 24px rgba(242,107,15,.30); transition:all .18s;
        }
        .btn:hover{transform:translateY(-2px); box-shadow:0 14px 30px rgba(242,107,15,.40)}
        .btn.ikincil{
            background:var(--beyaz); color:var(--gri-700); border:1.5px solid var(--gri-200);
            box-shadow:none; margin-top:11px; font-weight:600; font-size:.9rem; height:48px;
        }
        .btn.ikincil:hover{border-color:var(--marka); color:var(--marka); transform:none; box-shadow:none}
        .telif{text-align:center; margin-top:28px; font-size:.755rem; color:var(--gri-500)}
        @media (max-width:940px){
            .kabuk{flex-direction:column}
            .sol{flex:0 0 auto; width:100%; padding:34px 26px 38px}
            .sag{flex:1 1 auto; width:100%; padding:38px 24px 48px}
        }

/* unauthorized.php */
:root { --primary:#5B2D8E; --primary-dark:#4A1F73; }
        * { margin:0;padding:0;box-sizing:border-box; }
        body {
            font-family:'Inter',sans-serif; min-height:100vh;
            display:flex; align-items:center; justify-content:center;
            background:#F5F6FA; padding:24px;
        }
        .error-wrap {
            width:100%; max-width:460px;
        }
        .error-card {
            background:#fff; border-radius:20px; padding:48px 40px;
            text-align:center; box-shadow:0 20px 60px rgba(91,45,142,.12);
        }
        .error-icon {
            width:72px; height:72px; margin:0 auto 20px;
            background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            border-radius:20px; display:flex; align-items:center; justify-content:center;
            color:#fff; font-size:2rem;
        }
        .error-code {
            font-size:3.4rem; font-weight:700; color:var(--primary); line-height:1;
        }
        .error-code small {
            font-size:1rem; font-weight:500; color:#9CA3AF; display:block; margin-top:6px;
        }
        h1 { font-weight:700; font-size:1.5rem; color:#1F2937; margin-bottom:8px; }
        .subtitle { color:#6B7280; font-size:.92rem; line-height:1.6; margin-bottom:28px; }
        .btn-home {
            display:inline-flex; align-items:center; gap:8px;
            padding:13px 28px; background:var(--primary); color:#fff; border:none;
            border-radius:10px; font-size:.95rem; font-weight:600; cursor:pointer;
            text-decoration:none; transition:all .2s;
        }
        .btn-home:hover { background:var(--primary-dark); transform:translateY(-1px); color:#fff; }
        .brand {
            display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:36px;
        }
        .brand-icon {
            width:48px; height:48px; background:var(--primary); border-radius:12px;
            display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.3rem;
        }
        .brand-text { font-size:1.2rem; font-weight:700; color:#1F2937; }
        .footer-text { text-align:center; margin-top:20px; font-size:.8rem; color:#9CA3AF; }