/* 7Sanat Kafe — ortak tema (kurumsal: #1A1A18 + #E6B655, Montserrat / Playfair Display) */
:root {
  --bg: #121211; --panel: #1A1A18; --kart: #22221f; --kart2: #2a2a26; --cizgi: #36352f;
  --metin: #f3eee3; --soluk: #a9a398; --altin: #E6B655; --altin2: #c99a3c;
  --yesil: #108771; --yesil2: #ACD8A7; --kirmizi: #E11E26; --turuncu: #F26F27; --lacivert: #2D2E4A;
  --r: 14px; --r2: 22px;
  --golge: 0 10px 30px rgba(0,0,0,.35);
  font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--metin); font-size: 15px; -webkit-tap-highlight-color: transparent; }
h1, h2, h3, .serif { font-family: 'Playfair Display', Georgia, serif; font-weight: 600; letter-spacing: .2px; }
h1 { font-size: 1.6rem; margin: 0 0 .4rem; } h2 { font-size: 1.25rem; margin: 0 0 .6rem; } h3 { font-size: 1.05rem; margin: 0 0 .5rem; }
a { color: var(--altin); }
button, input, select, textarea { font: inherit; color: inherit; }
.gizli { display: none !important; }
.soluk { color: var(--soluk); } .kucuk { font-size: .82rem; } .altin { color: var(--altin); } .yesil { color: var(--yesil2); } .kirmizi { color: #ff6b6b; }
.sag { text-align: right; } .orta { text-align: center; } .kalin { font-weight: 700; }
.satir { display: flex; align-items: center; gap: .6rem; } .arasi { justify-content: space-between; } .sar { flex-wrap: wrap; } .bir { flex: 1; min-width: 0; }
.izgara { display: grid; gap: .8rem; }
.g2 { grid-template-columns: repeat(2, minmax(0,1fr)); } .g3 { grid-template-columns: repeat(3, minmax(0,1fr)); } .g4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 760px) { .g3, .g4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }

.kart { background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--r2); padding: 1rem 1.1rem; }
.kart.ince { padding: .7rem .85rem; border-radius: var(--r); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; border: 1px solid var(--cizgi); background: var(--kart2); padding: .62rem 1rem; border-radius: 999px; cursor: pointer; font-weight: 600; transition: transform .08s, background .15s; white-space: nowrap; }
.btn:active { transform: scale(.97); }
.btn:hover { background: #33322d; }
.btn.ana { background: var(--altin); color: #1A1A18; border-color: var(--altin); }
.btn.ana:hover { background: #f0c46a; }
.btn.yesil { background: var(--yesil); border-color: var(--yesil); color: #fff; }
.btn.kirmizi { background: transparent; border-color: #6b2a2a; color: #ff8a8a; }
.btn.hayalet { background: transparent; }
.btn.buyuk { padding: .9rem 1.3rem; font-size: 1.05rem; }
.btn.kucuk { padding: .35rem .7rem; font-size: .82rem; }
.btn:disabled { opacity: .45; pointer-events: none; }

input, select, textarea { width: 100%; background: var(--panel); border: 1px solid var(--cizgi); border-radius: 12px; padding: .62rem .8rem; outline: none; }
input:focus, select:focus, textarea:focus { border-color: var(--altin); }
label { display: block; font-size: .8rem; color: var(--soluk); margin: .55rem 0 .25rem; font-weight: 600; }
input[type=checkbox] { width: auto; accent-color: var(--altin); }

.rozet { display: inline-block; white-space: nowrap; padding: .16rem .55rem; border-radius: 999px; font-size: .74rem; font-weight: 700; background: var(--kart2); border: 1px solid var(--cizgi); }
.rozet.altin { background: rgba(230,182,85,.14); border-color: rgba(230,182,85,.4); color: var(--altin); }
.rozet.yesil { background: rgba(16,135,113,.18); border-color: rgba(16,135,113,.5); color: var(--yesil2); }
.rozet.kirmizi { background: rgba(225,30,38,.14); border-color: rgba(225,30,38,.45); color: #ff8a8a; }

table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: .76rem; color: var(--soluk); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; padding: .5rem .55rem; border-bottom: 1px solid var(--cizgi); }
td { padding: .55rem; border-bottom: 1px solid #2c2b27; vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
.tablo-kap { overflow-x: auto; }

.sekmeler { display: flex; gap: .35rem; background: var(--panel); border: 1px solid var(--cizgi); padding: .3rem; border-radius: 999px; overflow-x: auto; }
.sekmeler button { border: 0; background: transparent; padding: .5rem .9rem; border-radius: 999px; cursor: pointer; font-weight: 600; color: var(--soluk); white-space: nowrap; }
.sekmeler button.aktif { background: var(--altin); color: #1A1A18; }

/* modal */
.modal-arka { position: fixed; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 1rem; animation: sol .15s; }
.modal { background: var(--panel); border: 1px solid var(--cizgi); border-radius: var(--r2); width: min(560px, 100%); max-height: 92vh; overflow: auto; padding: 1.2rem; box-shadow: var(--golge); }
.modal.genis { width: min(860px, 100%); }
@keyframes sol { from { opacity: 0 } to { opacity: 1 } }

/* toast */
#toastlar { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; flex-direction: column; gap: .4rem; z-index: 99; pointer-events: none; }
.toast { background: #2b2a26; border: 1px solid var(--cizgi); padding: .7rem 1rem; border-radius: 12px; box-shadow: var(--golge); font-weight: 600; animation: yukari .2s; max-width: 90vw; }
.toast.hata { border-color: #7a2b2b; color: #ffb4b4; } .toast.ok { border-color: #1d6b5a; color: #bdf0d9; }
@keyframes yukari { from { transform: translateY(8px); opacity: 0 } to { transform: none; opacity: 1 } }

/* 7 şeritli logo motifi */
.logo { display: inline-flex; align-items: center; gap: .55rem; font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1.15rem; }
.logo .serit { display: inline-grid; grid-template-columns: repeat(7, 3px); gap: 2px; height: 22px; }
.logo .serit i { display: block; border-radius: 2px; }
.logo .serit i:nth-child(1){background:#E11E26}.logo .serit i:nth-child(2){background:#F26F27}.logo .serit i:nth-child(3){background:#E6B655}
.logo .serit i:nth-child(4){background:#ACD8A7}.logo .serit i:nth-child(5){background:#108771}.logo .serit i:nth-child(6){background:#5a5ca0}.logo .serit i:nth-child(7){background:#f3eee3}

.bos { padding: 2rem 1rem; text-align: center; color: var(--soluk); }
.cubuk { height: 8px; background: var(--kart2); border-radius: 99px; overflow: hidden; }
.cubuk > i { display: block; height: 100%; background: linear-gradient(90deg, var(--altin2), var(--altin)); border-radius: 99px; }
::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: #3a3934; border-radius: 9px; }