/*
Theme Name: OkeySistem V2
Theme URI: https://okeysistem.yayinonline.com.tr
Author: OmerAti
Description: Okeyv2 açık tema. Giriş, kayıt, misafir, kod, salon ve yazılar hazırdır. Statik okeyv2/index.html bozulmadan WP'ye uyarlanmıştır.
Version: 2.1.4
Text Domain: okeysistem-v2
*/

:root{
    --bg:#f6f7f9;
    --surface:#ffffff;
    --surface-2:#fafbfc;
    --border:#e6e8ec;
    --border-strong:#d6d9df;
    --text:#0f1720;
    --text-2:#4a5560;
    --muted:#8892a0;
    --gold:#b8952e;
    --gold-2:#d4af37;
    --gold-soft:#faf6e8;
    --green:#0f7a4a;
    --green-soft:#eaf7f0;
    --danger:#d94444;
    --shadow-sm:0 1px 2px rgba(15,23,32,.04);
    --shadow-md:0 4px 16px rgba(15,23,32,.06);
    --shadow-lg:0 20px 60px rgba(15,23,32,.08);
    --radius:16px;
    --radius-sm:10px;
}

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

html{
    -webkit-text-size-adjust:100%;
    scroll-behavior:smooth;
    width:100%;
    max-width:100%;
}

/* ==================== SCROLLBAR ==================== */
*{
    scrollbar-width:thin;
    scrollbar-color: var(--gold) var(--surface-2);
}

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--surface-2); }
::-webkit-scrollbar-thumb{
    background:linear-gradient(180deg, var(--gold-2), var(--gold));
    border-radius:10px;
    border:2px solid var(--surface-2);
    transition:background .2s;
}
::-webkit-scrollbar-thumb:hover{
    background:linear-gradient(180deg, var(--gold), #8f731f);
}
::-webkit-scrollbar-corner{ background:var(--surface-2); }

body{
    min-height:100vh;
    width:100%;
    max-width:100%;
    margin:0;
    padding-top:92px;
    background:var(--bg);
    color:var(--text);
    font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
    font-size:15px;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    overflow-x:hidden;
}

img, svg, video, iframe{
    max-width:100%;
    height:auto;
}

/* ==================== TOPBAR ==================== */

.topbar{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:100;
    width:100%;
    max-width:100%;
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--border);
}

.topbar-inner{
    max-width:1400px;
    width:100%;
    margin:0 auto;
    padding:0 clamp(20px, 4vw, 48px);
    height:92px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    position:relative;
    box-sizing:border-box;
}

.brand{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:800;
    font-size:17px;
    letter-spacing:-.4px;
    color:var(--text);
    text-decoration:none;
    flex-shrink:0;
}

.brand-mark{
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:linear-gradient(135deg, #1a1f2b, #0f1720);
    color:var(--gold-2);
    font-size:18px;
    box-shadow:0 4px 12px rgba(15,23,32,.15);
}

.brand-text{ display:none; }
.brand-text span{ color:var(--gold); }

/* ==================== NAV ==================== */

.nav{
    display:flex;
    align-items:center;
    gap:4px;
    margin-left:auto;
}

.nav a{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:13.5px;
    font-weight:600;
    color:var(--text-2);
    text-decoration:none;
    padding:8px 14px;
    border-radius:9px;
    transition:all .2s;
    position:relative;
}

.nav a svg{
    width:16px;
    height:16px;
    stroke:currentColor;
    fill:none;
    stroke-width:1.9;
    stroke-linecap:round;
    stroke-linejoin:round;
    flex-shrink:0;
    transition:stroke .2s;
}

.nav a:hover{
    color:var(--text);
    background:var(--surface-2);
}

.nav a.active{
    color:var(--text);
    background:var(--gold-soft);
}

.nav a.active svg{
    stroke:var(--gold);
}

/* ==================== MOBILE NAV TOGGLE ==================== */

.nav-toggle{
    display:none;
    width:40px;
    height:40px;
    border-radius:10px;
    border:1px solid var(--border);
    background:var(--surface);
    cursor:pointer;
    padding:0;
    place-items:center;
    margin-left:auto;
    transition:all .15s;
}

.nav-toggle:hover{
    border-color:var(--border-strong);
    background:var(--surface-2);
}

.nav-toggle svg{
    width:18px;
    height:18px;
    stroke:var(--text);
    fill:none;
    stroke-width:2;
    stroke-linecap:round;
}

/* ==================== LAYOUT ==================== */

.okey-page{
    width:100%;
    min-height:calc(100vh - 92px);
    display:grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items:start;
}

/* ==================== SOL PANEL (FORM) ==================== */

.panel{
    display:flex;
    flex-direction:column;
    padding:48px clamp(24px, 5vw, 80px) 32px;
    background:var(--surface);
    position:sticky;
    top:92px;
    align-self:start;
    width:100%;
    min-width:0;
    min-height:calc(100vh - 92px);
    box-sizing:border-box;
}

.form-wrapper{
    width:100%;
    max-width:400px;
    margin:0 auto;
    padding:20px 0 40px;
}

.form-header{
    margin-bottom:28px;
}

.form-header h1{
    font-size:28px;
    font-weight:700;
    letter-spacing:-.7px;
    line-height:1.2;
    color:var(--text);
}

.form-header p{
    margin-top:8px;
    font-size:14px;
    color:var(--text-2);
}

/* ==================== TABS ==================== */

.tabs{
    display:grid;
    grid-template-columns:1fr 1fr;
    background:var(--surface-2);
    border:1px solid var(--border);
    padding:4px;
    border-radius:12px;
    margin-bottom:26px;
}

.tab{
    height:38px;
    border:0;
    background:transparent;
    color:var(--muted);
    border-radius:9px;
    cursor:pointer;
    font-family:inherit;
    font-weight:600;
    font-size:13.5px;
    transition:all .2s;
    position:relative;
}

.tab.active{
    color:var(--text);
    background:var(--surface);
    box-shadow:var(--shadow-sm), 0 0 0 1px var(--border);
}

.tab:not(.active):hover{
    color:var(--text-2);
}

/* ==================== FORM ==================== */

.form{ display:none; }

.form.active{
    display:block;
    animation:fadeIn .25s ease;
}

@keyframes fadeIn{
    from{ opacity:0; transform:translateY(4px); }
    to{ opacity:1; transform:none; }
}

.field{ margin-bottom:16px; }

.field label{
    display:block;
    font-size:12.5px;
    font-weight:600;
    color:var(--text-2);
    margin-bottom:7px;
}

.input{
    width:100%;
    height:48px;
    border-radius:10px;
    border:1px solid var(--border-strong);
    outline:none;
    background:var(--surface);
    color:var(--text);
    padding:0 14px;
    font-family:inherit;
    font-size:14px;
    transition:border-color .15s, box-shadow .15s;
}

.input::placeholder{ color:#a8b0bb; }
.input:hover{ border-color:#c2c7d0; }
.input:focus{
    border-color:var(--gold);
    box-shadow:0 0 0 4px rgba(184,149,46,.12);
}

.input-wrap{ position:relative; }
.input-wrap .input{ padding-right:64px; }

.password-toggle{
    position:absolute;
    right:6px;
    top:50%;
    transform:translateY(-50%);
    border:0;
    background:none;
    color:var(--text-2);
    cursor:pointer;
    font-size:12px;
    font-weight:600;
    font-family:inherit;
    padding:8px 10px;
    border-radius:6px;
    transition:all .15s;
}

.password-toggle:hover{
    color:var(--gold);
    background:var(--gold-soft);
}

/* ==================== OPTIONS ==================== */

.options{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin:4px 0 20px;
    font-size:13px;
}

.checkbox{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:var(--text-2);
    cursor:pointer;
    user-select:none;
}

.checkbox input{
    width:16px;
    height:16px;
    accent-color:var(--gold);
    cursor:pointer;
    margin:0;
}

.link{
    color:var(--gold);
    text-decoration:none;
    font-weight:600;
    transition:opacity .15s;
}

.link:hover{ opacity:.75; }

/* ==================== BUTTON ==================== */

.submit{
    width:100%;
    height:50px;
    border:0;
    border-radius:10px;
    background:linear-gradient(135deg, #1a1f2b, #0f1720);
    color:#fff;
    font-family:inherit;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    letter-spacing:.2px;
    box-shadow:0 4px 14px rgba(15,23,32,.18);
    transition:transform .15s, box-shadow .15s, opacity .15s;
}

.submit:hover{
    transform:translateY(-1px);
    box-shadow:0 6px 20px rgba(15,23,32,.25);
}

.submit:active{
    transform:translateY(0);
    box-shadow:0 2px 8px rgba(15,23,32,.2);
}

.submit:disabled{
    opacity:.7;
    cursor:not-allowed;
    transform:none;
}

.submit-gold{
    background:linear-gradient(135deg, var(--gold-2), var(--gold));
    color:#1a1f2b;
    box-shadow:0 4px 14px rgba(184,149,46,.3);
}

.submit-gold:hover{
    box-shadow:0 6px 20px rgba(184,149,46,.4);
}

/* ==================== DIVIDER ==================== */

.divider{
    display:flex;
    align-items:center;
    gap:14px;
    margin:22px 0;
    color:var(--muted);
    font-size:12px;
    font-weight:500;
}

.divider::before,
.divider::after{
    content:"";
    flex:1;
    height:1px;
    background:var(--border);
}

/* ==================== GUEST BUTTON ==================== */

.btn-ghost{
    width:100%;
    height:48px;
    border-radius:10px;
    border:1px solid var(--border-strong);
    background:var(--surface);
    color:var(--text);
    font-family:inherit;
    font-size:13.5px;
    font-weight:600;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    transition:all .15s;
}

.btn-ghost:hover{
    border-color:var(--text);
    background:var(--surface-2);
}

.btn-ghost svg{
    width:16px;
    height:16px;
    stroke:currentColor;
    fill:none;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

/* ==================== TERMS ==================== */

.terms{
    display:flex;
    align-items:flex-start;
    gap:9px;
    color:var(--text-2);
    font-size:12.5px;
    line-height:1.55;
    margin:16px 0;
    cursor:pointer;
}

.terms input{
    width:16px;
    height:16px;
    margin-top:1px;
    accent-color:var(--gold);
    cursor:pointer;
    flex-shrink:0;
}

/* ==================== FOOTER ==================== */

.panel-footer{
    margin-top:auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:12px;
    color:var(--muted);
    padding-top:24px;
    gap:12px;
    flex-wrap:wrap;
}

.panel-footer .dot{
    color:var(--gold);
    font-weight:600;
}

/* ==================== SAĞ PANEL ==================== */

.visual{
    background:
        radial-gradient(circle at 30% 20%, rgba(212,175,55,.08), transparent 45%),
        radial-gradient(circle at 80% 80%, rgba(15,122,74,.08), transparent 45%),
        linear-gradient(160deg, #fbfbfd 0%, #f2f4f7 100%);
    display:flex;
    flex-direction:column;
    padding:48px clamp(32px, 5vw, 72px);
    position:relative;
    overflow:hidden;
    min-width:0;
    border-left:1px solid var(--border);
}

.visual::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(15,23,32,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15,23,32,.025) 1px, transparent 1px);
    background-size:40px 40px;
    mask-image:radial-gradient(circle at 50% 50%, black 30%, transparent 75%);
    -webkit-mask-image:radial-gradient(circle at 50% 50%, black 30%, transparent 75%);
    pointer-events:none;
}

/* ==================== HERO ==================== */

.hero{
    position:relative;
    z-index:2;
    text-align:center;
    padding:20px 0 40px;
}

.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:7px 14px;
    background:var(--gold-soft);
    border:1px solid rgba(184,149,46,.2);
    border-radius:999px;
    font-size:11px;
    font-weight:700;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:var(--gold);
    margin-bottom:24px;
}

.hero h2{
    font-family:'Playfair Display',Georgia,serif;
    font-size:clamp(34px, 3.8vw, 52px);
    line-height:1.05;
    letter-spacing:-1.2px;
    color:var(--text);
    margin-bottom:18px;
}

.hero h2 em{
    font-style:normal;
    color:var(--gold);
    position:relative;
    white-space:normal;
}

.hero h2 em::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:6px;
    height:8px;
    background:linear-gradient(90deg, rgba(212,175,55,.25), rgba(212,175,55,.05));
    border-radius:4px;
    z-index:-1;
}

.hero p{
    font-size:14.5px;
    color:var(--text-2);
    max-width:420px;
    margin:0 auto;
    line-height:1.7;
}

/* ==================== TILES ==================== */

.tiles{
    position:relative;
    z-index:2;
    display:flex;
    justify-content:center;
    gap:9px;
    margin-top:36px;
    flex-wrap:wrap;
}

.tile{
    width:50px;
    height:68px;
    border-radius:7px;
    background:#fff;
    border:1px solid var(--border-strong);
    display:grid;
    place-items:center;
    font-family:Georgia,serif;
    font-weight:700;
    font-size:23px;
    box-shadow:
        0 8px 20px rgba(15,23,32,.08),
        0 2px 4px rgba(15,23,32,.04),
        inset 0 -2px 0 rgba(15,23,32,.04);
    position:relative;
    transition:transform .3s ease;
}

.tile::before{
    content:"";
    position:absolute;
    inset:5px;
    border-radius:4px;
    border:1px solid rgba(15,23,32,.06);
}

.tile:nth-child(1){ color:#c72f34; transform:rotate(-8deg); }
.tile:nth-child(2){ color:#0f7a4a; transform:rotate(-4deg) translateY(-8px); }
.tile:nth-child(3){ color:#b87916; transform:rotate(0deg); }
.tile:nth-child(4){ color:#216e8e; transform:rotate(4deg) translateY(-8px); }
.tile:nth-child(5){ color:#c72f34; transform:rotate(8deg); }

.tile:hover{
    transform:rotate(0deg) translateY(-4px) scale(1.06);
    box-shadow:
        0 12px 28px rgba(15,23,32,.14),
        0 4px 8px rgba(15,23,32,.06);
    z-index:5;
}

/* ==================== BLOG ==================== */

.blog-section{
    position:relative;
    z-index:2;
    margin-top:20px;
}

.blog-heading{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    margin-bottom:18px;
}

.blog-heading h3{
    font-size:15px;
    font-weight:700;
    letter-spacing:-.2px;
    color:var(--text);
}

.blog-heading a{
    font-size:12px;
    color:var(--gold);
    text-decoration:none;
    font-weight:600;
}

.blog-heading a:hover{ opacity:.75; }

.blog-grid{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:14px;
    width:100%;
}

.blog-card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:14px;
    padding:16px;
    text-decoration:none;
    color:inherit;
    transition:all .2s ease;
    display:flex;
    flex-direction:column;
    gap:8px;
    position:relative;
    overflow:hidden;
    min-width:0;
    width:auto;
    max-width:none;
    grid-column:auto;
}

.blog-thumb,
.blog-card img{
    width:100%;
    height:auto;
    border-radius:10px;
    display:block;
    object-fit:cover;
    max-height:160px;
}

.blog-card::before{
    content:"";
    position:absolute;
    top:0;
    left:16px;
    right:16px;
    height:2px;
    background:linear-gradient(90deg, transparent, var(--gold), transparent);
    opacity:0;
    transition:opacity .2s;
}

.blog-card:hover{
    border-color:var(--border-strong);
    box-shadow:0 8px 24px rgba(15,23,32,.06);
    transform:translateY(-2px);
}

.blog-card:hover::before{ opacity:1; }

.blog-tag{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:10.5px;
    font-weight:700;
    letter-spacing:.8px;
    text-transform:uppercase;
    color:var(--gold);
}

.blog-tag::before{
    content:"";
    width:4px;
    height:4px;
    border-radius:50%;
    background:currentColor;
}

.blog-card h4{
    font-size:14px;
    font-weight:700;
    line-height:1.35;
    letter-spacing:-.2px;
    color:var(--text);
}

.blog-card p{
    font-size:12.5px;
    color:var(--muted);
    line-height:1.55;
    flex:1;
}

.blog-meta{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:11px;
    color:var(--muted);
    padding-top:8px;
    border-top:1px solid var(--border);
    margin-top:2px;
}

.blog-meta .author{
    width:20px;
    height:20px;
    border-radius:50%;
    background:linear-gradient(135deg, var(--gold-soft), #f0e6c8);
    display:grid;
    place-items:center;
    font-size:9px;
    font-weight:800;
    color:var(--gold);
    flex-shrink:0;
}

.blog-meta .sep{ opacity:.5; }

/* ==================== RESPONSIVE ==================== */

@media (max-width: 1180px){
    /* yazı grid 2 kolon kalır */
}

/* Tablet ve mobil: sağ panel tamamen gizlenmez, blog kısmı altta görünür */
@media (max-width: 1024px){
    .okey-page{
        grid-template-columns:1fr;
        align-items:stretch;
    }

    .panel{
        position:relative;
        top:auto;
        min-height:0;
        align-self:stretch;
    }

    .form-wrapper{
        margin-top:0;
        margin-bottom:24px;
    }

    .visual{
        display:flex;
        border-left:0;
        border-top:1px solid var(--border);
        padding:40px clamp(20px, 5vw, 48px) 48px;
    }

    /* Hero ve taşlar gizlenir; oyuncu listesi kalır */
    .hero .hero-badge,
    .hero h2,
    .hero p,
    .hero .tiles{
        display:none;
    }

    .hero{
        display:block;
        padding:0;
    }

    .vitrin-mini{
        margin-top:0;
        margin-bottom:20px;
    }

    .blog-section{
        margin-top:0;
    }

    .blog-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
        gap:16px;
    }

    .form-wrapper{
        max-width:440px;
    }
}

@media (max-width: 760px){
    .nav-toggle{ display:grid; }

    .nav{
        display:none;
        position:absolute;
        top:100%;
        left:0;
        right:0;
        background:var(--surface);
        border-bottom:1px solid var(--border);
        padding:12px 16px 16px;
        flex-direction:column;
        align-items:stretch;
        gap:2px;
        box-shadow:0 12px 32px rgba(15,23,32,.08);
        margin-left:0;
    }

    .nav.open{ display:flex; }

    .nav a{
        padding:12px 14px;
        font-size:14px;
        border-radius:10px;
    }

    .nav a svg{
        width:18px;
        height:18px;
    }

    /* Dar mobilde tek sütun */
    .blog-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
        gap:12px;
    }
}

@media (max-width: 420px){
    .blog-grid{
        grid-template-columns:1fr !important;
        gap:14px;
    }
}

@media (max-width: 520px){
    .topbar-inner{
        height:64px;
        padding:0 16px;
    }

    .brand{ font-size:16px; }

    .brand-mark{
        width:40px;
        height:40px;
        font-size:15px;
    }

    .brand-logo{
        height:56px;
        max-width:220px;
    }

    .panel{ padding:28px 20px 24px; }

    .form-wrapper{
        padding:16px 0 24px;
        max-width:100%;
    }

    .form-header h1{ font-size:24px; }
    .form-header p{ font-size:13px; }

    .tabs{ margin-bottom:22px; }

    .visual{
        padding:32px 20px 40px;
    }

    .blog-heading h3{
        font-size:14px;
    }

    .blog-card{
        padding:14px;
    }

    .panel-footer{
        font-size:11px;
        justify-content:center;
        text-align:center;
    }
}

/* ---- WordPress uyumu ---- */
body.admin-bar .topbar { top: 32px; }
body.admin-bar { padding-top: 92px; }
@media (max-width: 782px) {
  body.admin-bar .topbar { top: 46px; }
}
@media (max-width: 520px){
  body { padding-top: 64px; }
  .brand-logo { height: 56px; max-width: 220px; }
}
.screen-reader-text { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* WP global / block stillerinin kaydırmasını kes */
body.okeyv2 .alignwide,
body.okeyv2 .alignfull,
body.okeyv2 .wp-block-group,
body.okeyv2 .entry-content > *,
body.okeyv2 .tek-metin > *{
    max-width:100% !important;
    width:auto;
    margin-left:0 !important;
    margin-right:0 !important;
}
body.okeyv2 .tek-metin > *.aligncenter{ margin-left:auto !important; margin-right:auto !important; }
body.okeyv2 .wp-block-image img,
body.okeyv2 .tek-metin img{
    max-width:100%;
    height:auto;
}

/* giris.js form alanlari = okeyv2 field/input gorunumu */
#giris [hidden],
#giris.form [hidden]{
  display:none !important;
}
#giris.form,
#giris.form.active{
  display:block;
  width:100%;
  max-width:100%;
  animation:fadeIn .25s ease;
}
#giris .form-sekme,
.form-sekme{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  padding:4px;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:12px;
  margin-bottom:26px;
}
#giris .form-sekme button,
.form-sekme button{
  height:38px;
  border:0;
  border-radius:9px;
  padding:0 12px;
  background:transparent;
  font:inherit;
  font-weight:600;
  font-size:13.5px;
  color:var(--muted);
  cursor:pointer;
  transition:all .2s;
}
#giris .form-sekme button.aktif,
.form-sekme button.aktif{
  color:var(--text);
  background:var(--surface);
  box-shadow:var(--shadow-sm), 0 0 0 1px var(--border);
}
#giris .form-sekme button:not(.aktif):hover{
  color:var(--text-2);
}
#giris label.field,
#giris > label:not(.chk),
#giris .kayit > label:not(.chk),
#giris .unuttum > label,
#giris .kod > label{
  display:block;
  margin-bottom:16px;
  font-size:inherit;
  font-weight:inherit;
  color:inherit;
  min-width:0;
}
#giris .field-label,
#giris label > span.field-label{
  display:block;
  font-size:12.5px;
  font-weight:600;
  color:var(--text-2);
  margin-bottom:7px;
}
#giris .input,
#giris input[type=text],
#giris input[type=password],
#giris input[type=email],
#giris select{
  width:100%;
  max-width:100%;
  height:48px;
  padding:0 14px;
  border:1px solid var(--border-strong);
  border-radius:10px;
  background:var(--surface);
  font:inherit;
  font-size:14px;
  color:var(--text);
  box-sizing:border-box;
  outline:none;
  transition:border-color .15s, box-shadow .15s;
}
#giris .input::placeholder,
#giris input::placeholder{ color:#a8b0bb; }
#giris .input:hover,
#giris input:hover,
#giris select:hover{ border-color:#c2c7d0; }
#giris .input:focus,
#giris input:focus,
#giris select:focus{
  border-color:var(--gold);
  box-shadow:0 0 0 4px rgba(184,149,46,.12);
  outline:none;
}
#giris .chk{
  display:flex;
  align-items:flex-start;
  gap:9px;
  margin:12px 0;
  font-size:12.5px;
  font-weight:600;
  color:var(--text-2);
  line-height:1.55;
  cursor:pointer;
}
#giris .chk input{
  width:16px;
  height:16px;
  margin-top:1px;
  accent-color:var(--gold);
  flex-shrink:0;
}
#giris [type=submit],
#giris .btn.turuncu{
  width:100%;
  height:50px;
  margin-top:4px;
  border:0;
  border-radius:10px;
  background:linear-gradient(135deg, #1a1f2b, #0f1720);
  color:#fff;
  font:inherit;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  letter-spacing:.2px;
  box-shadow:0 4px 14px rgba(15,23,32,.18);
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
#giris [type=submit]:hover,
#giris .btn.turuncu:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 20px rgba(15,23,32,.25);
}
#giris .btn.mor,
#giris #misafir{
  width:100%;
  height:46px;
  margin-top:12px;
  border:1px solid var(--border-strong);
  border-radius:10px;
  background:var(--surface);
  color:var(--text);
  font:inherit;
  font-size:13.5px;
  font-weight:600;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
#giris .btn.mor:hover,
#giris #misafir:hover{ background:var(--surface-2); }
#giris .btn.sifre-unuttum,
#giris #sifre-unuttum{
  display:inline-block;
  width:auto;
  margin-top:14px;
  padding:0;
  border:0;
  background:transparent;
  color:var(--gold);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
}
#giris .btn.sifre-unuttum:hover,
#giris #sifre-unuttum:hover{ opacity:.75; }
#giris .form-hata{
  background:#ffe8e8;
  color:#8c1d12;
  border-radius:10px;
  padding:10px 12px;
  font-size:13px;
  margin-bottom:14px;
}
#giris .kod{
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:8px;
  align-items:end;
  margin-bottom:16px;
}
#giris .kod > label{ margin-bottom:0; }
#giris .kod img{
  height:48px;
  width:auto;
  border-radius:8px;
  border:1px solid var(--border);
  background:#fff;
}
#giris .kod .yenile{
  width:48px;
  height:48px;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--surface-2);
  cursor:pointer;
  font-size:18px;
}
#giris .unuttum p{
  margin:0 0 12px;
  color:var(--muted);
  font-size:13px;
  line-height:1.55;
}
#giris .kayit{ margin-top:2px; }

.uyari { position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:20px; background:rgba(15,23,32,.45); }
.uyari[hidden] { display:none !important; }
.uyari-kutu { width:min(420px,100%); background:var(--surface); color:var(--text); border-radius:16px; padding:20px; box-shadow:var(--shadow-lg); display:grid; gap:12px; }
.uyari-kutu h3 { margin:0; font-size:18px; }
.uyari-yazi { margin:0; color:var(--text-2); }
.uyari-btn { display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; }
.uyari-btn button { border:0; border-radius:10px; padding:10px 14px; font-weight:800; cursor:pointer; background:linear-gradient(180deg, var(--gold-2), var(--gold)); color:#3a2a00; }
.uyari-btn button.ikincil { background:var(--surface-2); color:var(--text); border:1px solid var(--border); }

/* ic sayfalar */
.tek { width:min(860px, calc(100% - 40px)); margin:28px auto 48px; }
.tek h1 { margin:0 0 16px; font-family:'Playfair Display',Georgia,serif; font-size:clamp(28px,4vw,40px); }
.sayfa-kart, .tek-metin { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:20px; box-shadow:var(--shadow-sm); }
.tek-resim { margin:0 0 16px; border-radius:16px; overflow:hidden; }
.tek-resim img { display:block; width:100%; height:auto; }
.sayfa-izgara { margin:16px 0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.sayfa-izgara > div { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:14px; display:grid; gap:6px; }
.sayfa-izgara b { font-size:15px; }
.sayfa-izgara span { color:var(--text-2); font-size:13px; }
.sayfa-cta { margin-top:18px; display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.sayfa-cta p { margin:0; flex:1 1 100%; color:var(--text-2); }
.sayfa-cta .btn { display:inline-flex; align-items:center; justify-content:center; text-decoration:none; border-radius:12px; padding:10px 16px; font-weight:800; }
.sayfa-cta .btn.turuncu { background:linear-gradient(180deg, var(--gold-2), var(--gold)); color:#3a2a00; }
.sayfa-cta .btn.yesil { background:var(--green-soft); color:var(--green); border:1px solid #b7e0c8; }
@media (max-width:760px) { .sayfa-izgara { grid-template-columns:1fr; } }

.brand-logo {
  height: 84px;
  width: auto;
  max-width: 320px;
  border-radius: 0;
  object-fit: contain;
  display: block;
  box-shadow: none;
}
.site-footer {
  display: flex;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 18px clamp(20px, 4vw, 48px) 28px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-sizing: border-box;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--muted);
}
.site-footer .dot {
  color: var(--gold);
  font-weight: 600;
}
@media (max-width: 520px) {
  .site-footer {
    justify-content: center;
    text-align: center;
    font-size: 11px;
    padding: 16px 16px 24px;
  }
}
.one-cikan{
  display:grid;
  grid-template-columns:minmax(0, 1.15fr) minmax(0, 1fr);
  gap:0;
  margin-bottom:16px;
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  background:var(--surface);
  text-decoration:none;
  color:inherit;
  box-shadow:var(--shadow-sm);
  transition:box-shadow .2s, transform .2s;
}
.one-cikan:hover{
  box-shadow:0 10px 28px rgba(15,23,32,.08);
  transform:translateY(-2px);
}
.one-cikan-resim,
.one-cikan-bos{
  display:block;
  width:100%;
  height:100%;
  min-height:180px;
  max-height:220px;
  object-fit:cover;
  background:
    radial-gradient(circle at 30% 20%, rgba(212,175,55,.2), transparent 50%),
    linear-gradient(160deg, #1a1f2b, #0f1720);
}
.one-cikan-govde{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:8px;
  padding:18px 20px;
  min-width:0;
}
.one-cikan-govde h4{
  margin:0;
  font-size:18px;
  font-weight:700;
  letter-spacing:-.3px;
  line-height:1.25;
  color:var(--text);
}
.one-cikan-govde p{
  margin:0;
  font-size:13.5px;
  color:var(--text-2);
  line-height:1.55;
}
@media (max-width: 760px){
  .one-cikan{ grid-template-columns:1fr; }
  .one-cikan-resim,
  .one-cikan-bos{ min-height:160px; max-height:180px; }
}
.visual-icerik{
  text-align:left;
  justify-content:flex-start;
  overflow:auto;
}
.visual-icerik .tek-ic{
  position:relative;
  z-index:2;
  width:100%;
  max-width:640px;
  margin:0 auto;
  padding:8px 0 24px;
}
.visual-icerik .tek-ic h1{
  margin:0 0 16px;
  font-family:'Playfair Display',Georgia,serif;
  font-size:clamp(28px, 3.5vw, 40px);
  line-height:1.15;
  letter-spacing:-.6px;
  color:var(--text);
}
.visual-icerik .tek-meta{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 18px;
  font-size:13px;
  color:var(--muted);
}
.visual-icerik .blog-tag{
  display:inline-flex;
  margin-bottom:12px;
}
.visual-icerik .sayfa-kart{
  background:rgba(255,255,255,.88);
}
.vitrin-mini { display:grid; gap:8px; margin-top:12px; max-width:420px; margin-left:auto; margin-right:auto; width:100%; position:relative; z-index:2; }
.vitrin-baslik { font-size:13px; font-weight:700; color:var(--text); margin:6px 0 2px; text-align:left; }
.vitrin-mini .chip { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:10px 12px; border-radius:10px; background:var(--surface); border:1px solid var(--border); color:var(--text); font-size:13px; text-decoration:none; box-shadow:var(--shadow-sm); min-width:0; }
.vitrin-mini .chip-ozet { background:linear-gradient(135deg, #1a1f2b, #0f1720); color:#fff; border-color:transparent; }
.vitrin-mini .chip-ozet b { color:var(--gold-2); }
.vitrin-mini .chip span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vitrin-mini .chip b { color:var(--gold); flex-shrink:0; }