/* ==========================================================
   KAFE SİSTEM — Ortak Stil Dosyası
   ========================================================== */

@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');

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

html, body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    -webkit-font-smoothing: antialiased;
    background: #faf6ef;
    color: #2c1810;
    line-height: 1.5;
}

.serif { font-family: 'Fraunces', Georgia, serif; }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; }
input, textarea, select { font-family: inherit; font-size: 15px; }
img { max-width: 100%; display: block; }

/* === FORM === */
.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 6px; color: #4a3520; }
.field input, .field textarea, .field select {
    width: 100%; padding: 12px 14px; border: 1px solid #e5dccc;
    border-radius: 10px; background: white; transition: border-color 0.2s, box-shadow 0.2s;
}
.field input:focus, .field textarea:focus, .field select:focus {
    outline: none; border-color: #7b3f00; box-shadow: 0 0 0 3px rgba(123,63,0,0.1);
}
.field textarea { resize: vertical; min-height: 80px; }
.field small { display: block; color: #8a7560; font-size: 12px; margin-top: 4px; }

/* === BUTONLAR === */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 20px; border-radius: 10px; font-weight: 600; font-size: 14px;
    transition: all 0.15s; border: 1px solid transparent;
}
.btn-primary { background: #7b3f00; color: white; }
.btn-primary:hover { background: #5e2f00; }
.btn-secondary { background: white; color: #2c1810; border-color: #e5dccc; }
.btn-secondary:hover { background: #f4f1ec; }
.btn-danger { background: #dc2626; color: white; }
.btn-danger:hover { background: #b91c1c; }
.btn-success { background: #059669; color: white; }
.btn-success:hover { background: #047857; }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn-block { display: flex; width: 100%; }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* === KARTLAR === */
.card {
    background: white; border-radius: 16px; padding: 20px;
    box-shadow: 0 2px 8px rgba(44,24,16,0.06);
    border: 1px solid rgba(44,24,16,0.04);
}

/* === FLASH MESAJLAR === */
.flash { padding: 12px 16px; border-radius: 10px; margin-bottom: 16px; font-size: 14px; }
.flash-success { background: #d1fae5; color: #065f46; }
.flash-error { background: #fee2e2; color: #991b1b; }

/* === ROZETLER === */
.badge {
    display: inline-block; padding: 4px 10px; border-radius: 999px;
    font-size: 12px; font-weight: 600;
}

/* === TABLO === */
.table { width: 100%; border-collapse: collapse; background: white; border-radius: 12px; overflow: hidden; }
.table th, .table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid #f4f1ec; }
.table th { background: #faf6ef; font-weight: 600; font-size: 13px; color: #4a3520; }
.table tr:last-child td { border-bottom: 0; }
.table tr:hover td { background: #fafaf8; }

/* === RESPONSIVE === */
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

.fade-in { animation: fadeIn 0.3s ease-out; }
.pulse { animation: pulse 1.2s ease-in-out infinite; }

/* === MENÜ (Müşteri) === */
.menu-grain {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
}
.menu-dots {
    background-image: radial-gradient(currentColor 1px, transparent 1px);
    background-size: 22px 22px;
    opacity: 0.06;
}
.menu-lines {
    background-image: repeating-linear-gradient(45deg, currentColor 0, currentColor 1px, transparent 1px, transparent 16px);
    opacity: 0.04;
}

/* === BACK BUTTON === */
.back-btn {
    position: fixed; top: 12px; left: 12px; z-index: 50;
    background: rgba(255,255,255,0.92); backdrop-filter: blur(8px);
    border-radius: 999px; padding: 10px; box-shadow: 0 2px 12px rgba(0,0,0,0.1);
    display: inline-flex; align-items: center; gap: 6px; font-size: 13px;
    color: #2c1810; padding-right: 16px; font-weight: 500;
}
.back-btn:hover { background: white; }

/* === İKON === */
.icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 8px; background: #f4f1ec; color: #4a3520;
}
.icon-btn:hover { background: #e8e0d0; }

/* === MOBILE FRIENDLY === */
@media (max-width: 640px) {
    .container { padding: 0 12px; }
    .card { padding: 16px; border-radius: 14px; }
}