/* ============================================================================
   Kolay Yönet — Ana Stil Dosyası (Aydınlık Tema · Beyaz / Siyah / Altın)
   ----------------------------------------------------------------------------
   Tailwind CDN üstüne binen özel bileşen stilleri, animasyonlar ve tasarım
   token'ları. Marka kimliği: temiz beyaz zemin, keskin siyah tipografi,
   premium altın sarısı vurgular.
   ============================================================================ */

:root {
    /* Marka */
    --color-gold:                  #E8B92E;   /* parlak altın */
    --color-gold-deep:             #A9811A;   /* okunur altın (metin) */
    --color-gold-soft:             #F6E6BC;   /* açık altın tint */
    --color-ink:                   #16130C;   /* neredeyse siyah */

    /* JS (blog.js pagination) tarafından kullanılan değişkenler */
    --color-primary:               #A9811A;
    --color-on-primary:            #FFFFFF;
    --color-on-surface:            #16130C;
    --color-surface-container-high:#FFFFFF;
    --color-surface-bright:        #FFFFFF;
    --color-outline-variant:       #E5DECC;

    --radius-lg:                   0.75rem;

    /* Yumuşak gölgeler */
    --shadow-sm:  0 1px 2px rgba(22, 19, 12, .06), 0 1px 3px rgba(22, 19, 12, .04);
    --shadow-md:  0 4px 12px rgba(22, 19, 12, .07), 0 2px 4px rgba(22, 19, 12, .04);
    --shadow-lg:  0 18px 40px rgba(22, 19, 12, .10), 0 4px 12px rgba(22, 19, 12, .05);
    --shadow-gold: 0 12px 30px rgba(217, 169, 22, .28);
}

/* ----------------------------------------------------------------------------
   TEMEL
   ---------------------------------------------------------------------------- */
* { -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; }

body {
    background: #FFFFFF;
    color: var(--color-ink);
    overflow-x: hidden;
}

::selection {
    background: var(--color-gold);
    color: var(--color-ink);
}

/* İnce, markalı kaydırma çubuğu */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: #F7F3EA; }
::-webkit-scrollbar-thumb {
    background: #D8CFB8;
    border-radius: 99px;
    border: 3px solid #F7F3EA;
}
::-webkit-scrollbar-thumb:hover { background: var(--color-gold-deep); }

/* Material Symbols — temel ayar + dolu varyant */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
    user-select: none;
}
.material-symbols-outlined.filled {
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

/* Odak görünürlüğü (erişilebilirlik) */
:focus-visible {
    outline: 3px solid rgba(217, 169, 22, .55);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ----------------------------------------------------------------------------
   MARKA YARDIMCILARI
   ---------------------------------------------------------------------------- */

/* Altın metin gradyanı (başlık vurguları) */
.text-gradient {
    background: linear-gradient(100deg, #C99A1E 0%, #E8B92E 45%, #B5841A 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* CTA / logo gradyanı — parlak altın yüzey */
.cta-gradient {
    background: linear-gradient(135deg, #F0C84A 0%, #E3A916 55%, #C9920F 100%);
    color: var(--color-ink);
    box-shadow: var(--shadow-gold);
}

/* Altın çerçeveli düğme alternatifi */
.btn-outline-gold {
    border: 1.5px solid var(--color-gold-deep);
    color: var(--color-gold-deep);
    background: transparent;
    transition: all .2s ease;
}
.btn-outline-gold:hover {
    background: var(--color-gold-soft);
}

/* Kahraman bölümü zemini — beyaz + ince altın doku */
.hero-gradient {
    background:
        radial-gradient(60% 50% at 80% 0%, rgba(232, 185, 46, .14) 0%, transparent 60%),
        radial-gradient(55% 45% at 0% 20%, rgba(232, 185, 46, .10) 0%, transparent 55%),
        linear-gradient(180deg, #FFFFFF 0%, #FBF9F3 100%);
}

/* İnce altın ayraç çizgisi */
.gold-rule {
    height: 3px;
    width: 56px;
    border-radius: 99px;
    background: linear-gradient(90deg, #E8B92E, #C9920F);
}

/* Noktalı arka plan dokusu */
.dot-grid {
    background-image: radial-gradient(rgba(22,19,12,.07) 1px, transparent 1px);
    background-size: 22px 22px;
}

/* Siyah bölüm (footer / vurgu bantları) */
.section-ink {
    background: var(--color-ink);
    color: #F3EFE6;
}
.section-ink .text-on-surface,
.section-ink .text-on-background { color: #FFFFFF; }
.section-ink .text-on-surface-variant { color: #B9B2A2; }

/* ----------------------------------------------------------------------------
   NAVİGASYON — cam efektli, aydınlık
   ---------------------------------------------------------------------------- */
.glass-nav {
    background: rgba(255, 255, 255, .72);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid transparent;
    transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
#main-nav.scrolled {
    background: rgba(255, 255, 255, .92);
    border-bottom-color: var(--color-outline-variant);
    box-shadow: var(--shadow-sm);
}

/* Aktif nav linki */
nav a.active,
#mobile-menu a.active {
    color: var(--color-gold-deep);
    font-weight: 700;
}

/* ----------------------------------------------------------------------------
   MOBİL MENÜ (off-canvas)
   ---------------------------------------------------------------------------- */
.mobile-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(22, 19, 12, .45);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
    z-index: 60;
}
.mobile-menu-overlay.open { opacity: 1; visibility: visible; }

.mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: min(82vw, 340px);
    background: #FFFFFF;
    border-left: 1px solid var(--color-outline-variant);
    box-shadow: var(--shadow-lg);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    transform: translateX(100%);
    transition: transform .35s cubic-bezier(.4, 0, .2, 1);
    z-index: 70;
    overflow-y: auto;
}
.mobile-menu.open { transform: translateX(0); }
.mobile-menu a {
    padding: .85rem .75rem;
    border-radius: .75rem;
    color: var(--color-ink);
    transition: background .2s ease, color .2s ease;
}
.mobile-menu a:hover { background: #FBF9F3; color: var(--color-gold-deep); }
.mobile-menu a.active { background: var(--color-gold-soft); color: var(--color-gold-deep); }

/* ----------------------------------------------------------------------------
   KARTLAR
   ---------------------------------------------------------------------------- */
.card-hoverable {
    box-shadow: var(--shadow-sm);
    transition: transform .3s cubic-bezier(.4, 0, .2, 1),
                box-shadow .3s ease,
                border-color .3s ease;
    will-change: transform;
}
.card-hoverable:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(217, 169, 22, .45) !important;
}

/* Hafif çerçeveli yüzey kartları için gölge takviyesi */
.elevate { box-shadow: var(--shadow-md); }
.elevate-lg { box-shadow: var(--shadow-lg); }

/* ----------------------------------------------------------------------------
   SCROLL REVEAL ANİMASYONLARI
   ---------------------------------------------------------------------------- */
.reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s cubic-bezier(.16, 1, .3, 1),
                transform .7s cubic-bezier(.16, 1, .3, 1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }
.reveal-delay-3 { transition-delay: .24s; }
.reveal-delay-4 { transition-delay: .32s; }

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
    html { scroll-behavior: auto; }
}

/* ----------------------------------------------------------------------------
   YUMUŞAK NABIZ / PİNG
   ---------------------------------------------------------------------------- */
@keyframes pulse-soft {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .45; transform: scale(.85); }
}
.animate-pulse-soft { animation: pulse-soft 2s ease-in-out infinite; }

@keyframes float-soft {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}
.animate-float { animation: float-soft 6s ease-in-out infinite; }

/* ----------------------------------------------------------------------------
   SSS (DETAILS/SUMMARY) — yumuşak açılış
   ---------------------------------------------------------------------------- */
.faq-item {
    box-shadow: var(--shadow-sm);
    transition: box-shadow .25s ease, border-color .25s ease;
}
.faq-item[open] {
    border-color: rgba(217, 169, 22, .5) !important;
    box-shadow: var(--shadow-md);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary { transition: color .2s ease; }
.faq-item[open] summary { color: var(--color-gold-deep); }

/* Eski accordion sınıfı uyumu (gerekirse) */
.accordion-item .accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
}
.accordion-item.open .accordion-body { max-height: 600px; }

/* ----------------------------------------------------------------------------
   BAŞA DÖN DÜĞMESİ
   ---------------------------------------------------------------------------- */
.back-to-top {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    width: 48px;
    height: 48px;
    border-radius: 999px;
    background: linear-gradient(135deg, #F0C84A, #C9920F);
    color: var(--color-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-gold);
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px);
    transition: opacity .3s ease, visibility .3s ease, transform .3s ease;
    z-index: 45;
    border: none;
    cursor: pointer;
}
.back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { filter: brightness(1.06); transform: translateY(-2px); }

/* ----------------------------------------------------------------------------
   FORM
   ---------------------------------------------------------------------------- */
input, textarea, select { font-family: inherit; }

.input-invalid {
    box-shadow: 0 0 0 2px rgba(192, 57, 43, .45) !important;
}
.form-error {
    display: flex;
    align-items: center;
    gap: .35rem;
    color: #C0392B;
    font-size: .8rem;
    margin-top: .4rem;
    font-weight: 500;
}
.form-success {
    margin-top: 1rem;
    padding: 1rem 1.15rem;
    border-radius: .9rem;
    background: #EEF8EE;
    border: 1px solid #BFE3BF;
    color: #1E6B2E;
    font-size: .92rem;
    line-height: 1.5;
}

/* Spinner (form gönderim) */
.spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(22, 19, 12, .25);
    border-top-color: var(--color-ink);
    border-radius: 50%;
    animation: spin .7s linear infinite;
    vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ----------------------------------------------------------------------------
   BLOG — skeleton & yardımcılar
   ---------------------------------------------------------------------------- */
.skeleton {
    position: relative;
    overflow: hidden;
    background: #EFEADD;
    border-radius: .6rem;
}
.skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
    animation: shimmer 1.4s infinite;
}
@keyframes shimmer { 100% { transform: translateX(100%); } }

/* Blog gövde içeriği (CMS'den gelen HTML) tipografisi */
.prose-ky { color: #2A271E; line-height: 1.8; font-size: 1.06rem; }
.prose-ky h2 { font-family: Manrope, sans-serif; font-weight: 800; font-size: 1.7rem; margin: 2.2rem 0 .9rem; color: var(--color-ink); }
.prose-ky h3 { font-family: Manrope, sans-serif; font-weight: 700; font-size: 1.3rem; margin: 1.8rem 0 .7rem; color: var(--color-ink); }
.prose-ky p { margin: 0 0 1.1rem; }
.prose-ky a { color: var(--color-gold-deep); text-decoration: underline; text-underline-offset: 3px; }
.prose-ky ul, .prose-ky ol { margin: 0 0 1.1rem 1.3rem; }
.prose-ky li { margin-bottom: .5rem; }
.prose-ky blockquote {
    border-left: 3px solid var(--color-gold);
    padding: .4rem 0 .4rem 1.2rem;
    margin: 1.4rem 0;
    color: #5C564A;
    font-style: italic;
}
.prose-ky code {
    background: #F1ECDF;
    padding: .15rem .4rem;
    border-radius: .35rem;
    font-size: .9em;
}
.prose-ky img { border-radius: 1rem; margin: 1.5rem 0; }

/* ----------------------------------------------------------------------------
   ŞERİT KAYDIRMA (logos / jump menu) görünümü
   ---------------------------------------------------------------------------- */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Erişilebilir gizli (skip link) */
.sr-only:not(:focus):not(:active) {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

/* ----------------------------------------------------------------------------
   3 BOYUTLU (3D) EFEKTLER — mobil uygulama hissi
   ---------------------------------------------------------------------------- */
.scene { perspective: 1400px; }

/* Hafifçe eğik, derinlikli kart (hover'da düzleşir) */
.tilt-3d {
    transform: rotateY(-11deg) rotateX(6deg);
    transform-style: preserve-3d;
    transition: transform .6s cubic-bezier(.16, 1, .3, 1), box-shadow .6s ease;
    box-shadow:
        -28px 34px 60px rgba(22, 19, 12, .18),
        0 2px 6px rgba(22, 19, 12, .06);
}
.scene:hover .tilt-3d {
    transform: rotateY(-4deg) rotateX(2deg) translateY(-6px);
}

/* Karttan "havaya kalkan" katmanlar */
.layer-pop { transform: translateZ(48px); }
.layer-pop-sm { transform: translateZ(26px); }

/* Yüzen rozet kartları */
.float-badge {
    box-shadow: var(--shadow-lg);
    animation: float-soft 6s ease-in-out infinite;
}
.float-badge.delay { animation-delay: 1.5s; }

@media (max-width: 1023px) {
    /* Mobilde 3D eğimi sıfırla — okunabilirlik ve performans */
    .tilt-3d { transform: none; box-shadow: var(--shadow-lg); }
    .layer-pop, .layer-pop-sm { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .tilt-3d { transform: none; }
    .float-badge { animation: none; }
}

/* İnce, sürekli dönen ışıltı (altın halka) */
.gold-ring {
    background: conic-gradient(from 0deg, transparent, rgba(232,185,46,.55), transparent 40%);
    animation: spin 8s linear infinite;
}

/* Yumuşak giriş (hero görsel) */
@keyframes rise-in {
    from { opacity: 0; transform: translateY(40px) scale(.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.rise-in { animation: rise-in 1s cubic-bezier(.16,1,.3,1) both; }

/* Özellik kartı — minimalist hover */
.feature-card {
    transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, border-color .35s ease;
    box-shadow: var(--shadow-sm);
}
.feature-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(217,169,22,.5) !important;
}

/* ============================================================================
   MOBİL UYGULAMA KALİTESİ — küçük ama hissedilir rötuşlar
   ============================================================================ */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* iOS'ta input'a odaklanınca otomatik yakınlaşmayı önle (yazı boyutu ≥16px) */
@media (max-width: 640px) {
    input, select, textarea { font-size: 16px; }
}

/* Sayı girişlerinde (personel/masa sayısı) tarayıcı artırma oklarını gizle */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Çentikli cihazlarda güvenli alan — başa dön butonu çentiğe değmesin */
.back-to-top { margin-bottom: env(safe-area-inset-bottom, 0px); }

/* Butonlarda çift dokunuş gecikmesini kaldır — uygulama gibi anlık tepki */
.cta-gradient, button, a[role="button"], .btn-auto { touch-action: manipulation; }