/* Karadeniz Karavan - klasik tema özel stilleri (Tailwind CDN'e ek) */
html { -webkit-tap-highlight-color: transparent; }
::selection { background: #1F4A36; color: #fff; }
body { font-size: 15px; }

.font-display { letter-spacing: 0; }

/* Başlık süsü: ── ◆ ── */
.ornament { display: flex; align-items: center; gap: .6rem; }
.ornament span { display: block; height: 1px; width: 44px; background: #B48A3C; }
.ornament i { display: block; width: 8px; height: 8px; background: #B48A3C; transform: rotate(45deg); }

/* Menü alt çizgisi */
.nav-link::after { content: ""; position: absolute; left: .5rem; right: .5rem; bottom: 2px; height: 2px; background: #B48A3C; transform: scaleX(0); transition: transform .25s ease; }
.nav-link:hover::after, .nav-link.is-active::after { transform: scaleX(1); }

.footer-title { font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.5rem; font-weight: 700; color: #fff; position: relative; padding-bottom: .6rem; }
.footer-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 40px; height: 2px; background: #B48A3C; }

/* Sayfa başlık bandı */
.page-hero { position: relative; isolation: isolate; background: #14233A; color: #fff; }
.page-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(20,35,58,.94), rgba(20,35,58,.72)); }

.hero-scrim { background: linear-gradient(180deg, rgba(20,35,58,.55) 0%, rgba(20,35,58,.70) 60%, rgba(20,35,58,.88) 100%); }

/* Kâğıt dokusu */
.paper { background-color: #F6F1E7; background-image: radial-gradient(rgba(139,94,60,.06) 1px, transparent 1px); background-size: 18px 18px; }

/* Çerçeveli görsel */
.frame { position: relative; }
.frame::before { content: ""; position: absolute; inset: -14px 14px 14px -14px; border: 2px solid #B48A3C; z-index: 0; }
.frame > * { position: relative; z-index: 1; }

/* Animasyonlar */
@keyframes kk-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes kk-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes kk-pulse { 0% { box-shadow: 0 0 0 0 rgba(37,211,102,.5); } 70% { box-shadow: 0 0 0 16px rgba(37,211,102,0); } 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); } }
@keyframes kk-toast { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.rise { animation: kk-rise .9s cubic-bezier(.2,.7,.2,1) both; }
.rise-1 { animation-delay: .1s; } .rise-2 { animation-delay: .2s; } .rise-3 { animation-delay: .3s; } .rise-4 { animation-delay: .4s; }
.wa-pulse { animation: kk-pulse 2.4s infinite; }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible { opacity: 1; transform: none; }
.toast { animation: kk-toast .25s ease-out both; }

/* Zengin metin içerik (blog / ürün açıklaması) */
.prose-kk { color: #4B4339; line-height: 1.85; font-size: 1.0625rem; }
.prose-kk h2 { font-family: "Cormorant Garamond", Georgia, serif; color: #14233A; font-size: 2rem; font-weight: 700; margin: 2.2rem 0 .9rem; }
.prose-kk h3 { font-family: "Cormorant Garamond", Georgia, serif; color: #14233A; font-size: 1.6rem; font-weight: 700; margin: 1.8rem 0 .7rem; }
.prose-kk h4 { color: #14233A; font-weight: 700; margin: 1.4rem 0 .5rem; }
.prose-kk p { margin: 0 0 1.15rem; }
.prose-kk a { color: #1F4A36; text-decoration: underline; text-underline-offset: 4px; }
.prose-kk ul, .prose-kk ol { margin: 0 0 1.2rem 1.4rem; }
.prose-kk ul { list-style: disc; } .prose-kk ol { list-style: decimal; }
.prose-kk li { margin: .35rem 0; }
.prose-kk li::marker { color: #B48A3C; }
.prose-kk strong { color: #14233A; }
.prose-kk blockquote { border-left: 3px solid #B48A3C; background: #EFE5D3; padding: .9rem 1.2rem; margin: 1.5rem 0; color: #14233A; font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.3rem; font-style: italic; }
.prose-kk img { margin: 1.5rem 0; max-width: 100%; height: auto; }
.prose-kk pre { background: #FBF8F1; border: 1px solid #E4DACA; padding: 1rem; overflow-x: auto; }

/* Lightbox */
#lightbox { position: fixed; inset: 0; z-index: 80; display: none; align-items: center; justify-content: center; background: rgba(12,20,33,.95); }
#lightbox.open { display: flex; animation: kk-fade .2s ease both; }
#lightbox img { max-width: 92vw; max-height: 84vh; box-shadow: 0 30px 80px rgba(0,0,0,.5); border: 6px solid #fff; }
#lightbox button { position: absolute; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 999px; background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.2); transition: background-color .2s; }
#lightbox button:hover { background: #B48A3C; color: #14233A; }
#lightbox .lb-close { top: 20px; right: 20px; }
#lightbox .lb-prev { left: 20px; top: 50%; transform: translateY(-50%); }
#lightbox .lb-next { right: 20px; top: 50%; transform: translateY(-50%); }
#lightbox .lb-count { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); color: #D8D1C3; font-size: .875rem; }

/* Karşılaştırma tablosu */
.cmp-table { width: 100%; border-collapse: collapse; }
.cmp-table th, .cmp-table td { padding: .9rem 1rem; border-bottom: 1px solid #E4DACA; text-align: left; vertical-align: top; font-size: .9rem; }
.cmp-table th { color: #6E6558; font-weight: 600; width: 28%; background: #FBF8F1; }
.cmp-table td { color: #1C2A3A; }
.cmp-table td.better { color: #1F4A36; font-weight: 700; }
.cmp-table tr:hover td { background: #FBF8F1; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .reveal { opacity: 1; transform: none; }
}