/* ============================================================
   Lider İnternet Kafe — Claude Warm Theme
   Sıcak krem / kil-mercan tonları · kafe + internet teması
   Bu dosya Bootstrap 5 üzerine giydirilir; tüm sayfalarda
   <link href="assets/theme.css"> ile çağrılır.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap');

:root{
    --bg:        #faf9f5;
    --bg-warm:   #f5f2ea;
    --surface:   #ffffff;
    --surface-2: #f7f4ec;
    --border:    #e7e2d6;
    --border-2:  #ddd6c6;

    --text:      #1f1e1d;
    --muted:     #6b6862;
    --faint:     #9a958a;

    --clay:      #cc785c;   /* imza vurgu */
    --clay-dk:   #b5694f;
    --clay-soft: #f3e6df;

    --green:     #3c7d5b;
    --green-soft:#e3efe7;
    --red:       #b54a3f;
    --red-soft:  #f6e3e0;
    --amber:     #c0852e;
    --amber-soft:#f7ecd6;
    --blue:      #4a6d8c;
    --blue-soft: #e3ebf2;

    --radius:    16px;
    --radius-sm: 10px;
    --shadow:    0 1px 2px rgba(31,30,29,.04), 0 8px 24px rgba(31,30,29,.06);
    --shadow-lg: 0 12px 40px rgba(31,30,29,.12);

    --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
    --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

*{ box-sizing:border-box; }

body{
    font-family: var(--sans) !important;
    background: var(--bg) !important;
    color: var(--text) !important;
    -webkit-font-smoothing: antialiased;
    line-height: 1.55;
}

/* subtle warm texture on full-page backgrounds */
body.warm-bg{
    background:
        radial-gradient(900px 500px at 12% -8%, #f6ece2 0%, transparent 60%),
        radial-gradient(900px 500px at 100% 0%, #f0ece0 0%, transparent 55%),
        var(--bg) !important;
}

h1,h2,h3,h4,h5,h6{
    font-family: var(--serif) !important;
    color: var(--text);
    letter-spacing: -.01em;
    font-weight: 600;
}

a{ color: var(--clay); text-decoration:none; }
a:hover{ color: var(--clay-dk); }

hr{ border:0; border-top:1px solid var(--border); opacity:1; margin:1.5rem 0; }

::selection{ background: var(--clay-soft); }

/* ---------- NAVBAR ---------- */
.navbar{
    background: transparent !important;
    padding: 1.2rem 0;
}
.navbar h4, .navbar .brand{
    font-family: var(--serif);
    font-weight: 600;
    color: var(--text);
    margin:0;
}

/* ---------- CARD ---------- */
.card{
    background: var(--surface) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow);
    padding: 22px;
    margin-bottom: 22px;
    transition: transform .25s ease, box-shadow .25s ease;
}
.card:hover{
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}
.card h4, .card h5, .card h6{ margin-top:0; }

/* ---------- BUTTONS ---------- */
.btn{
    font-family: var(--sans) !important;
    font-weight: 600 !important;
    border-radius: var(--radius-sm) !important;
    padding: .6rem 1.1rem !important;
    border: 1px solid transparent !important;
    transition: all .18s ease !important;
    box-shadow: none !important;
}
.btn:hover{ transform: translateY(-1px); }
.btn-custom{ border-radius: 999px !important; padding:.75rem 1.6rem !important; }

.btn-primary,
.btn-success{
    background: var(--clay) !important;
    border-color: var(--clay) !important;
    color: #fff !important;
}
.btn-primary:hover,
.btn-success:hover{
    background: var(--clay-dk) !important;
    border-color: var(--clay-dk) !important;
}

.btn-danger{
    background: var(--red) !important; border-color: var(--red) !important; color:#fff !important;
}
.btn-danger:hover{ background:#9c3f35 !important; }

.btn-warning{
    background: var(--amber) !important; border-color: var(--amber) !important; color:#fff !important;
}
.btn-warning:hover{ background:#a87224 !important; }

.btn-info{
    background: var(--blue) !important; border-color: var(--blue) !important; color:#fff !important;
}
.btn-info:hover{ background:#3d5b75 !important; }

.btn-dark{
    background: var(--text) !important; border-color: var(--text) !important; color:var(--bg) !important;
}
.btn-dark:hover{ background:#000 !important; }

.btn-light,
.btn-secondary{
    background: var(--surface-2) !important;
    border-color: var(--border-2) !important;
    color: var(--text) !important;
}
.btn-light:hover,
.btn-secondary:hover{ background:#efeadd !important; }

.btn-outline-light{
    background: transparent !important;
    border: 1px solid var(--border-2) !important;
    color: var(--text) !important;
}
.btn-outline-light:hover{
    background: var(--clay) !important;
    border-color: var(--clay) !important;
    color:#fff !important;
}
.btn-sm{ padding:.35rem .7rem !important; font-size:.82rem !important; }

/* ---------- FORMS ---------- */
.form-control, .form-select, input, select, textarea{
    background: var(--surface) !important;
    border: 1px solid var(--border-2) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--text) !important;
    padding: .6rem .8rem !important;
}
.form-control::placeholder{ color: var(--faint) !important; }
.form-control:focus, .form-select:focus, input:focus, select:focus{
    border-color: var(--clay) !important;
    box-shadow: 0 0 0 3px var(--clay-soft) !important;
    outline:none !important;
}
label{ color: var(--muted); font-size:.85rem; font-weight:500; margin-bottom:.2rem; }

/* ---------- TABLES ---------- */
.table{
    color: var(--text) !important;
    border-color: var(--border) !important;
    --bs-table-bg: transparent;
}
.table th{
    font-family: var(--sans);
    font-weight:600;
    color: var(--muted) !important;
    text-transform: uppercase;
    font-size:.72rem;
    letter-spacing:.04em;
    border-color: var(--border) !important;
    background: var(--surface-2) !important;
}
.table td{
    border-color: var(--border) !important;
    vertical-align: middle;
    color: var(--text) !important;
}
.table-bordered th, .table-bordered td{ border:1px solid var(--border) !important; }
.table-dark{
    --bs-table-bg: var(--surface-2) !important;
    color: var(--text) !important;
}
.table-dark th, .table-dark td{
    background: var(--surface-2) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}

/* ---------- ALERTS ---------- */
.alert{ border-radius: var(--radius-sm) !important; border:1px solid transparent !important; font-weight:500; }
.alert-success{ background: var(--green-soft) !important; color: var(--green) !important; border-color:#cfe6d7 !important; }
.alert-danger { background: var(--red-soft) !important;  color: var(--red) !important;   border-color:#eccfca !important; }
.alert-info   { background: var(--blue-soft) !important; color: var(--blue) !important;  border-color:#cfdce8 !important; }
.alert-warning{ background: var(--amber-soft) !important;color: var(--amber) !important; border-color:#ecd9b3 !important; }

/* ---------- BADGES ---------- */
.badge{ border-radius:999px !important; font-weight:600; padding:.4em .75em; }
.badge.bg-warning{ background: var(--amber-soft) !important; color: var(--amber) !important; }

/* ---------- HERO (index) ---------- */
.hero{
    min-height: 82vh;
    display:flex; align-items:center; justify-content:center; text-align:center;
    padding: 2rem 1rem;
}
.hero .eyebrow{
    display:inline-block;
    font-family: var(--sans);
    font-weight:600;
    font-size:.8rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    color: var(--clay);
    background: var(--clay-soft);
    padding:.4rem 1rem;
    border-radius:999px;
    margin-bottom:1.5rem;
}
.hero h1{
    font-family: var(--serif) !important;
    font-size: clamp(2.6rem, 6vw, 4.6rem);
    font-weight: 600;
    line-height:1.05;
    margin-bottom:1rem;
}
.hero h1 .accent{ color: var(--clay); font-style: italic; }
.hero p{ color: var(--muted) !important; font-size:1.15rem; max-width:560px; margin:0 auto 2rem; }

/* feature cards on landing */
.feature{
    background: var(--surface);
    border:1px solid var(--border);
    border-radius: var(--radius);
    padding: 28px 22px;
    height:100%;
    text-align:left;
    box-shadow: var(--shadow);
    transition: transform .25s ease, box-shadow .25s ease;
}
.feature:hover{ transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.feature .ic{
    width:48px;height:48px;border-radius:12px;
    display:flex;align-items:center;justify-content:center;
    font-size:24px; background: var(--clay-soft); margin-bottom:14px;
}
.feature h4{ margin:0 0 .4rem; }
.feature p{ color: var(--muted); margin:0; }

footer{ color: var(--faint) !important; border-top:1px solid var(--border); margin-top:3rem; }

/* ---------- AUTH BOXES (login / kayit) ---------- */
.login-box, .box{
    width:100%; max-width:420px;
    background: var(--surface) !important;
    border:1px solid var(--border);
    padding:38px 34px !important;
    border-radius: 20px !important;
    box-shadow: var(--shadow-lg) !important;
}
.auth-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:1.5rem; }
.brand-mark{
    text-align:center; font-family:var(--serif); font-weight:600;
    color:var(--clay); font-size:1.05rem; margin-bottom:.4rem; letter-spacing:.02em;
}
.links a{ color: var(--muted) !important; }
.links a:hover{ color: var(--clay) !important; }

/* ---------- MASA / TABLE CARDS (panels) ---------- */
.container-flex{ display:flex; flex-wrap:wrap; justify-content:center; gap:4px; }
.masa{
    width:220px; padding:18px; margin:10px; border-radius:16px;
    text-align:center;
    background: var(--surface) !important;
    border:1px solid var(--border);
    box-shadow: var(--shadow);
    color: var(--text) !important;
    transition: transform .2s ease, box-shadow .2s ease;
    position:relative; overflow:hidden;
}
.masa:hover{ transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.masa h5, .masa h6{ color: var(--text); margin-top:0; }
.masa small{ color: var(--muted); }
/* durum şeridi (üst kenar) */
.masa::before{ content:""; position:absolute; top:0; left:0; right:0; height:4px; background: var(--border-2); }
.masa.bos::before{ background: var(--green); }
.masa.dolu::before{ background: var(--red); }
.masa.pc::before{ background: var(--blue); }
.masa.ps::before{ background: #7d5ba6; }
.masa.bilardo::before{ background: var(--green); }
/* eski tam-dolgu sınıflarını yumuşak rozete çevir */
.masa.bos{ background: var(--surface) !important; }
.masa.dolu{ background: var(--surface) !important; }
.masa.bg-warning{ background: var(--amber-soft) !important; color: var(--text) !important; }
.masa.bg-warning::before{ background: var(--amber); }
.masa.bg-info{ background: var(--blue-soft) !important; color: var(--text) !important; }
.masa.bg-info::before{ background: var(--blue); }
.masa.text-dark{ color: var(--text) !important; }

.text-success{ color: var(--green) !important; }
.text-danger{ color: var(--red) !important; }
.text-warning{ color: var(--amber) !important; }
.text-info{ color: var(--blue) !important; }
.text-secondary, .text-muted{ color: var(--muted) !important; }

/* section headings inside panels */
.container > h2, .container > h4,
.container-flex + h4{ font-family: var(--serif); }
.page-title{
    text-align:center; font-family:var(--serif); font-weight:600;
    font-size: clamp(1.8rem,4vw,2.6rem); margin: .4rem 0 1.6rem;
}
.page-title .accent{ color:var(--clay); }

/* bg-dark override (some cards use it) */
.bg-dark{ background: var(--surface-2) !important; color: var(--text) !important; }
.bg-dark.text-white, .bg-dark .text-white{ color: var(--text) !important; }

/* iletisim floating box (musteri) */
.iletisim{
    position: fixed; bottom: 22px; right: 22px;
    background: var(--surface) !important;
    border:1px solid var(--border);
    padding: 18px; border-radius: 16px; width: 240px;
    box-shadow: var(--shadow-lg); font-size: 14px; color: var(--text) !important;
}
.iletisim h6{ color: var(--clay); margin-top:0; }
.iletisim p{ color: var(--muted); margin-bottom:.5rem; }

/* ---------- KASA (masa_detay) ---------- */
.kasa{
    width: 400px; margin: 60px auto;
    background: var(--surface) !important;
    border:1px solid var(--border);
    border-radius: 18px; box-shadow: var(--shadow-lg); overflow:hidden;
}
.kasa .header{
    background: var(--clay) !important; color:#fff !important;
    padding:16px; text-align:center; font-family:var(--serif); font-size:1.2rem;
}
.kasa .content{ padding: 22px; }
.kasa .fiyat{
    font-family: var(--serif); font-size:34px; text-align:center;
    color: var(--green) !important; font-weight:600;
}

/* iframe inside admin panel */
iframe{ background: var(--surface); border-radius:14px; }

/* ---------- FİŞ (receipt, print) ---------- */
.fis{
    width:320px; margin:auto; background:#fff;
    border:1px dashed var(--text); padding:18px;
    font-family:'Courier New', monospace; color:var(--text);
}
.fis h3{ font-family: var(--serif); }
.fis hr{ border-top:1px dashed var(--text); }

/* ---------- responsive ---------- */
@media (max-width: 600px){
    .masa{ width: 100%; max-width: 320px; }
    .iletisim{ position: static; width:100%; margin-top:1rem; }
}