/* DAĞ CİVATA — site geneli stiller (header.php içinden taşındı; metin/HTML oranı için) */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 7rem; }
body { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }

/* --- İÇERİK KORUMA --- */
body {
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
input, textarea, select { -webkit-user-select: auto; user-select: auto; }

img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
    pointer-events: none;
}
a img { pointer-events: none; }

/* --- GENEL STİLLER --- */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #fff; }
::-webkit-scrollbar-thumb { background: #d3dc4e; border-radius: 5px; border: 2px solid #fff; }

/* Hero Arka Plan */
.hero-blob {
    position: absolute; 
    filter: blur(80px); 
    z-index: -1; 
    opacity: 0.4;
    animation: float 10s infinite ease-in-out;
    pointer-events: none;
    will-change: transform;
}

@keyframes float {
    0% { transform: translate(0, 0); }
    50% { transform: translate(20px, 40px); }
    100% { transform: translate(0, 0); }
}

/* Yüzen aksiyon butonları (footer) - daha sade ve küçük */
.btn-square {
    width: 46px; height: 46px; display: flex; align-items: center; justify-content: center;
    border-radius: 14px; transition: transform .25s ease, background-color .25s ease, box-shadow .25s ease; cursor: pointer;
}
.btn-square:hover { transform: translateY(-2px); }

/* =========================================================
   SOFT MODERN BUTON SİSTEMİ (site geneli - sade & minimalist)
   ========================================================= */
.btn{
    display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
    font-weight:600; font-size:.875rem; line-height:1.15; letter-spacing:.01em;
    padding:.625rem 1.125rem; border-radius:.75rem;
    border:1px solid transparent; cursor:pointer; text-align:center;
    /* Taşma koruması: flex/grid içinde butonlar küçülebilsin, üst üste binmesin */
    min-width:0; max-width:100%; overflow-wrap:anywhere;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }
.btn:focus-visible{ outline:2px solid #d3dc4e; outline-offset:2px; }
.btn-sm{ padding:.4375rem .875rem; font-size:.8125rem; border-radius:.625rem; }
.btn-lg{ padding:.75rem 1.375rem; font-size:.9375rem; }
.btn-block{ width:100%; }
.btn-dark{ background:#000; color:#fff; }
.btn-dark:hover{ background:#d3dc4e; color:#000; }
.btn-yellow{ background:#d3dc4e; color:#000; }
.btn-yellow:hover{ background:#c7d03f; }
.btn-outline{ background:#fff; color:#111827; border-color:#e5e7eb; }
.btn-outline:hover{ border-color:#d3dc4e; background:#fcfdf6; }
.btn-ghost{ background:#f8fafc; color:#374151; border-color:#eef2f6; }
.btn-ghost:hover{ background:#f1f5f9; }
.btn-wa{ background:#25d366; color:#fff; }
.btn-wa:hover{ background:#1fbd59; }
.btn-light{ background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.18); }
.btn-light:hover{ background:#fff; color:#000; border-color:#fff; }

/* Eski sayfalardaki aşırı büyük butonları otomatik yumuşat (markup bozulmadan) */
a[class*="font-bold"][class*="rounded"][class*="py-4"],
button[class*="font-bold"][class*="rounded"][class*="py-4"],
a[class*="font-bold"][class*="rounded"][class*="py-5"],
button[class*="font-bold"][class*="rounded"][class*="py-5"]{
    padding-top:.6875rem !important; padding-bottom:.6875rem !important;
    font-size:.9375rem !important; border-radius:.75rem !important;
}
a[class*="font-bold"][class*="rounded"][class*="px-8"],
button[class*="font-bold"][class*="rounded"][class*="px-8"],
a[class*="font-bold"][class*="rounded"][class*="px-10"],
button[class*="font-bold"][class*="rounded"][class*="px-10"]{
    padding-left:1.375rem !important; padding-right:1.375rem !important;
}
a[class*="font-bold"][class*="rounded"][class*="h-14"],
button[class*="font-bold"][class*="rounded"][class*="h-14"]{ height:2.875rem !important; }
a[class*="font-bold"][class*="rounded"][class*="text-lg"],
button[class*="font-bold"][class*="rounded"][class*="text-lg"]{ font-size:.9375rem !important; }

/* Butonlarda abartılı parlama/gölgeleri sadeleştir */
.shadow-neon, .hover\:shadow-neon:hover { box-shadow: 0 4px 16px -8px rgba(0,0,0,.20) !important; }
a[class*="font-bold"][class*="rounded"]:hover,
button[class*="font-bold"][class*="rounded"]:hover { box-shadow: 0 6px 18px -10px rgba(0,0,0,.22) !important; }

/* Menü Animasyonları */
#mobileMenu { transition: max-height .35s ease, opacity .25s ease; transform-origin: top; overflow: hidden; }
.menu-hidden { max-height: 0; opacity: 0; padding: 0; pointer-events: none; }
.menu-visible {
    max-height: calc(100vh - 7rem); opacity: 1; pointer-events: auto;
    overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}

.group:hover .dropdown-menu { display: block; animation: slideUp 0.2s ease-out; }

@keyframes slideUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   NAVBAR: %100 SABİT GEOMETRİ
   Scroll edildiğinde genişlik / kenar boşluğu / köşe DEĞİŞMEZ.
   Sadece arka plan ve gölge yumuşar.
   ========================================================= */
#navbarWrapper { transition: none !important; }

#navbarWrapper #navbarContainer,
#navbarWrapper.scrolled #navbarContainer {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 1rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    transition: none !important;
}
@media (min-width: 640px) {
    #navbarWrapper #navbarContainer,
    #navbarWrapper.scrolled #navbarContainer { max-width: 640px !important; padding-left: 1rem !important; padding-right: 1rem !important; }
}
@media (min-width: 768px) {
    #navbarWrapper #navbarContainer,
    #navbarWrapper.scrolled #navbarContainer { max-width: 768px !important; }
}
@media (min-width: 1024px) {
    #navbarWrapper #navbarContainer,
    #navbarWrapper.scrolled #navbarContainer { max-width: 1024px !important; }
}
@media (min-width: 1280px) {
    #navbarWrapper #navbarContainer,
    #navbarWrapper.scrolled #navbarContainer { max-width: 1280px !important; }
}
@media (min-width: 1536px) {
    #navbarWrapper #navbarContainer,
    #navbarWrapper.scrolled #navbarContainer { max-width: 1536px !important; }
}

/* Kutunun kendisi: köşe yarıçapı ve yükseklik de sabit */
#navbar {
    border-radius: 1rem !important;
    transition: background-color .3s ease, box-shadow .3s ease, border-color .3s ease;
}
#navbarWrapper.scrolled #navbar {
    background: rgba(255, 255, 255, 0.94) !important;
    box-shadow: 0 6px 20px -12px rgba(0, 0, 0, 0.18) !important;
    border-color: rgba(0, 0, 0, 0.06) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

/* Filigran */
.watermark-container { position: relative; overflow: hidden; }
.watermark-container::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%; width: 50%; height: 50%;
    transform: translate(-50%, -50%);
    background-image: url('/logo.svg'); 
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.08;
    pointer-events: none;
    z-index: 10;
}

/* MOBİL UYUM: %100 mobil optimize */
@media (max-width: 1023px) {
    /* Mobilde gereksiz ağır gölgeleri sadeleştir */
    .shadow-2xl, .shadow-xl, .shadow-card { box-shadow: 0 8px 24px -16px rgba(0,0,0,.12) !important; }
    .shadow-lg { box-shadow: 0 4px 14px -10px rgba(0,0,0,.10) !important; }
}
@media (max-width: 640px) {
    .hero-blob { width: 18rem !important; height: 18rem !important; filter: blur(60px); }
    section { overflow-x: hidden; }
    .btn { width: 100%; }
    .btn-auto { width: auto !important; }
    .btn-square { width: 44px; height: 44px; }
}

/* MOBİL TAŞMA KORUMASI
   flex/grid çocukları varsayılan olarak min-width:auto taşır; uzun metinli
   butonlar bu yüzden küçülemeyip yan yana geldiklerinde üst üste biniyordu. */
@media (max-width: 767px) {
    .flex > *, .grid > * { min-width: 0; }
    body { overflow-wrap: break-word; }
    table { max-width: 100%; }
    pre, code { overflow-x: auto; max-width: 100%; }
}
html, body { max-width: 100%; }
@media (max-width: 768px) {
    html { font-size: 15px; }
    .container { padding-left: 1rem; padding-right: 1rem; }
}

/* Dokunmatik hedef boyutu (mobil erişilebilirlik) */
@media (hover: none) {
    .btn, .mobile-link { min-height: 44px; }
}

/* CLS Önleme: img boyut rezervasyonu */
img { max-width: 100%; height: auto; }

/* Reduced motion için erişilebilirlik */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* MOBİL: iOS Safari'de 16px altı yazı boyutlu alanlara dokununca sayfa
   otomatik yakınlaşıyordu. Mobil/tablette form alanları 16px olur. */
@media (max-width: 1023px) {
    input[type="text"], input[type="search"], input[type="email"], input[type="tel"],
    input[type="number"], input[type="password"], input:not([type]), select, textarea { font-size: 16px !important; }
}
/* MOBİL: yatay kaydırmayı kesin engelle (sticky öğeleri bozmadan) */
@supports (overflow: clip) { html { overflow-x: clip; } }
/* MOBİL: çentikli ekranlarda (iPhone) yüzen butonlar ev çubuğunun altında kalmasın */
#floatingActions { margin-bottom: env(safe-area-inset-bottom, 0px); margin-right: env(safe-area-inset-right, 0px); }
/* Uzun kelimeler / ürün kodları dar ekranda taşmasın */
h1, h2, h3 { overflow-wrap: break-word; }
iframe, video, embed, object { max-width: 100%; }

/* Screen reader only */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---- Uzun içerik metni ve bilgi tabloları (civata rehberi, kategori ve kurumsal sayfalar) ---- */
.dc-metin { color:#374151; font-size:15px; line-height:1.75; }
.dc-metin p { margin:0 0 1rem; }
.dc-metin ul, .dc-metin ol { margin:0 0 1.1rem; padding-left:1.2rem; }
.dc-metin ul { list-style:disc; } .dc-metin ol { list-style:decimal; }
.dc-metin li { margin:.4rem 0; padding-left:.2rem; }
.dc-metin li::marker { color:#9aa21d; font-weight:700; }
.dc-metin a { color:#0f172a; font-weight:700; border-bottom:2px solid #d3dc4e; }
.dc-metin a:hover { background:#d3dc4e; }
.dc-metin strong { color:#111827; }
.dc-tablo { border:1px solid #e5e7eb; border-radius:1rem; overflow:hidden; background:#fff; }
.dc-tablo table { width:100%; min-width:520px; border-collapse:collapse; font-size:13.5px; }
.dc-tablo thead th { background:#0f172a; color:#fff; text-align:left; font-weight:700; padding:.7rem .9rem; white-space:nowrap; }
.dc-tablo tbody th { white-space:nowrap; text-align:left; font-weight:700; color:#111827; background:#fafbf2; }
.dc-tablo tbody th, .dc-tablo tbody td { padding:.6rem .9rem; border-top:1px solid #eef0f3; vertical-align:top; }
.dc-tablo tbody tr:hover td, .dc-tablo tbody tr:hover th { background:#fcfdf3; }
.dc-tablo-not { font-size:12px; color:#6b7280; padding:.6rem .9rem; margin:0; border-top:1px solid #eef0f3; background:#fafafa; }
.dc-kaydir { scrollbar-width:none; } .dc-kaydir::-webkit-scrollbar { display:none; }
.dc-sss summary::-webkit-details-marker { display:none; }
@media (max-width:640px){ .dc-metin { font-size:14.5px; } .dc-tablo table { font-size:12.5px; } }

/* ---- Ürün kartı (katalog ve kategori sayfaları) — sade sınıflar, daha hafif HTML ---- */
.dc-kart { display:flex; flex-direction:column; height:100%; background:#fff; border:1px solid #f1f5f9; border-radius:1rem; padding:.75rem; box-shadow:0 1px 2px rgba(0,0,0,.05); transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.dc-kart:hover { transform:translateY(-4px); box-shadow:0 10px 30px -14px rgba(0,0,0,.18); border-color:#d3dc4e; }
.dc-kart-g { position:relative; overflow:hidden; aspect-ratio:1/1; background:#f9fafb; border-radius:.75rem; display:flex; align-items:center; justify-content:center; padding:.75rem; margin-bottom:.75rem; }
.dc-kart-g img { width:100%; height:100%; object-fit:contain; position:relative; z-index:20; transition:transform .5s ease; }
.dc-kart:hover .dc-kart-g img { transform:scale(1.08); }
.dc-kart-e { position:absolute; top:.5rem; left:.5rem; z-index:30; background:rgba(255,255,255,.92); border:1px solid #f1f5f9; border-radius:.25rem; padding:.125rem .5rem; font-size:9px; font-weight:700; color:#000; text-transform:uppercase; letter-spacing:.05em; }
.dc-kart-b { font-weight:700; color:#000; font-size:.875rem; line-height:1.3; text-align:center; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin:0; }
.dc-kart:hover .dc-kart-b { color:#8f9612; }
.dc-kart-a { font-size:12px; color:#6b7280; line-height:1.45; text-align:center; margin:.35rem 0 0; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
@media (min-width:768px) {
  .dc-kart { border-radius:1.5rem; padding:1rem; }
  .dc-kart-g { border-radius:1rem; padding:1.5rem; margin-bottom:1rem; }
  .dc-kart-e { top:.75rem; left:.75rem; font-size:10px; padding:.25rem .5rem; }
  .dc-kart-b { font-size:1rem; }
  .dc-kart-a { font-size:13px; }
}

/* ---- Menü ve alt bilgi bağlantıları — tekrar eden uzun sınıf listeleri yerine ---- */
.dc-nav-a { padding:.5rem .75rem; font-size:.875rem; font-weight:600; color:#374151; border-radius:.5rem; transition:color .2s, background-color .2s; }
.dc-nav-a:hover { color:#000; background:#f9fafb; }
.dc-dd-a { display:block; padding:.625rem 1.25rem; font-size:.875rem; font-weight:500; color:#4b5563; border-bottom:1px solid #f9fafb; transition:background-color .2s, color .2s; }
.dc-dd-a:last-child { border-bottom:0; }
.dc-dd-a:hover { background:#d3dc4e; color:#000; }
.dc-m-a { display:flex; align-items:center; padding:.625rem 1rem; border-radius:.75rem; font-weight:600; color:#1f2937; font-size:.875rem; }
.dc-m-a:hover, .dc-m-s:hover { background:#f9fafb; }
.dc-m-s { display:flex; align-items:center; padding:.5rem 1rem .5rem 1.25rem; border-radius:.5rem; font-size:.875rem; font-weight:500; color:#4b5563; border-left:2px solid transparent; }
.dc-m-s:hover { border-left-color:#d3dc4e; }
.dc-f-a { display:inline-block; padding:.125rem 0; transition:color .2s, padding-left .2s; }
.dc-f-a:hover { color:#fff; padding-left:.5rem; }
.dc-f-a i { font-size:.75rem; margin-right:.5rem; color:#d3dc4e; }

/* ---- Alt bilgi: sosyal ikonlar ve yüzen buton ipuçları ---- */
.dc-sosyal { width:2.5rem; height:2.5rem; border-radius:.75rem; background:#1f2937; display:flex; align-items:center; justify-content:center; color:#fff; transition:background-color .3s; }
.dc-sosyal:hover { background:var(--h, #d3dc4e); }
.dc-ipucu { display:none; position:absolute; right:100%; margin-right:.75rem; background:#fff; color:#000; font-size:.75rem; font-weight:600; padding:.375rem .75rem; border-radius:.5rem; box-shadow:0 6px 24px -12px rgba(0,0,0,.10); opacity:0; transition:opacity .2s; white-space:nowrap; pointer-events:none; }
@media (min-width:768px) { .dc-ipucu { display:block; } .group:hover > .dc-ipucu { opacity:1; } }

/* =====================================================================
   SADE TASARIM SİSTEMİ (anasayfa ve genel) — yönetim paneliyle aynı dil
   ===================================================================== */
.dc-kutu { background:#fff; border:1px solid #eceef2; border-radius:16px; }
.dc-kutu-link { transition:border-color .2s, box-shadow .2s, transform .2s; }
.dc-kutu-link:hover { border-color:#d3dc4e; box-shadow:0 10px 28px -18px rgba(15,23,42,.25); transform:translateY(-2px); }
.dc-etiket { display:inline-flex; align-items:center; gap:.45rem; padding:.3rem .7rem; border:1px solid #eceef2; border-radius:999px; background:#fff; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#475569; }
.dc-bolum-bas { display:flex; flex-direction:column; gap:.75rem; margin-bottom:1.25rem; }
@media (min-width:640px) { .dc-bolum-bas { flex-direction:row; align-items:flex-end; justify-content:space-between; } }
@media (min-width:768px) { .dc-bolum-bas { margin-bottom:1.75rem; } }
.dc-bolum-baslik { font-size:1.375rem; line-height:1.2; font-weight:800; color:#0f172a; letter-spacing:-.01em; }
@media (min-width:768px) { .dc-bolum-baslik { font-size:1.875rem; } }
.dc-bolum-alt { font-size:.875rem; color:#64748b; margin-top:.3rem; max-width:40rem; line-height:1.55; }
.dc-cip { display:inline-flex; align-items:center; padding:.35rem .8rem; border:1px solid #e5e7eb; border-radius:999px; font-size:.8125rem; font-weight:600; color:#1f2937; background:#fff; transition:border-color .2s, background .2s; }
.dc-cip:hover { border-color:#d3dc4e; background:#fbfce9; }
.dc-liste-baslik { font-size:.75rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#0f172a; padding-bottom:.6rem; margin-bottom:.8rem; border-bottom:1px solid #eceef2; }
.dc-liste { display:flex; flex-direction:column; gap:.55rem; }
.dc-liste a { display:block; font-size:13.5px; line-height:1.4; color:#4b5563; transition:color .15s; }
.dc-liste a:hover { color:#000; }
.dc-liste a strong { color:#0f172a; }
.dc-detay summary::-webkit-details-marker { display:none; }
.dc-detay summary { list-style:none; }
.dc-metin h2, .dc-metin h3, .dc-metin h4 { font-weight:700; color:#0f172a; line-height:1.35; margin:1.2rem 0 .45rem; font-size:1.02rem; }
.dc-metin > :first-child { margin-top:0; }
.dc-metin-sm { font-size:14px; line-height:1.7; }
.dc-metin-sm p { margin-bottom:.75rem; }

/* ---- Tek hizalama: header, içerik ve footer aynı genişlik ve kenar boşluğunu kullanır ---- */
.container:not([class*="max-w-"]) { max-width:1280px !important; }
.container { padding-left:1.25rem !important; padding-right:1.25rem !important; }
@media (min-width:768px) { .container { padding-left:1.5rem !important; padding-right:1.5rem !important; } }
#navbarWrapper #navbarContainer, #navbarWrapper.scrolled #navbarContainer { max-width:1280px !important; padding-left:1.25rem !important; padding-right:1.25rem !important; }
@media (min-width:768px) { #navbarWrapper #navbarContainer, #navbarWrapper.scrolled #navbarContainer { padding-left:1.5rem !important; padding-right:1.5rem !important; } }

/* ---- Menü açılır paneller (Kategoriler, Civata rehberi) ---- */
.dc-acilir { position:relative; }
.dc-acilir-panel { position:absolute; top:100%; left:0; padding-top:.75rem; z-index:50; opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .18s, transform .18s, visibility .18s; }
.dc-acilir:hover .dc-acilir-panel, .dc-acilir:focus-within .dc-acilir-panel { opacity:1; visibility:visible; transform:none; }
.dc-acilir-ic { background:#fff; border:1px solid #eceef2; border-radius:14px; box-shadow:0 18px 40px -20px rgba(15,23,42,.28); overflow:hidden; }
.dc-rehber-a { display:flex; gap:.75rem; align-items:flex-start; padding:.7rem .8rem; border-radius:10px; transition:background .15s; }
.dc-rehber-a:hover { background:#f6f7f9; }
.dc-rehber-a .ik { width:2.1rem; height:2.1rem; border-radius:.6rem; background:#f6f7f9; display:flex; align-items:center; justify-content:center; color:#0f172a; flex-shrink:0; transition:background .15s; }
.dc-rehber-a:hover .ik { background:#d3dc4e; }
.dc-m-grup { padding:.75rem 1rem .25rem; font-size:11px; font-weight:700; color:#9ca3af; text-transform:uppercase; letter-spacing:.08em; border-bottom:1px solid #f3f4f6; margin-bottom:.25rem; }
@media (min-width:1024px) and (max-width:1279px) { .dc-nav-a { padding:.5rem .5rem; font-size:.8125rem; } }
@media (min-width:1280px) { .dc-nav-a { padding:.5rem .7rem; font-size:.84rem; } }
.dc-nav-a { white-space:nowrap; }
.dc-acilir-panel.orta { left:50%; transform:translate(-50%, 6px); }
.dc-acilir:hover .dc-acilir-panel.orta, .dc-acilir:focus-within .dc-acilir-panel.orta { transform:translate(-50%, 0); }