/* Toptan Servis Arabaları - özel stiller (Tailwind CDN üzerine) */

:root {
    --primary: #2C3E50;
    --secondary: #16A085;
}

html { -webkit-text-size-adjust: 100%; }
body { text-rendering: optimizeLegibility; }

/* Satır kırpma yardımcıları (Tailwind line-clamp güvencesi) */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Header gölge (scroll'da) */
#site-header.is-scrolled {
    box-shadow: 0 6px 24px -12px rgba(44, 62, 80, 0.35);
}

/* Seçim rengi */
::selection {
    background: var(--secondary);
    color: #fff;
}

/* Odak erişilebilirliği */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--secondary);
    outline-offset: 2px;
}

/* Kaydırma çubuğu */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #eef1f3; }
::-webkit-scrollbar-thumb { background: #b8c2cc; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--secondary); }

/* Hareket azaltma tercihi */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---- MOBİL OPTİMİZASYON ---- */
@media (max-width: 767px) {
    /* Hero daha kompakt */
    section:first-of-type .text-3xl { font-size: 1.65rem; line-height: 1.2; }
    section:first-of-type .text-lg,
    section:first-of-type .text-base { font-size: 0.9rem; }

    /* Grid'ler mobilde tek kolon */
    .grid.sm\:grid-cols-2.lg\:grid-cols-4 { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
    .grid.lg\:grid-cols-3 { grid-template-columns: 1fr; }

    /* Ürün kartları mobilde daha sıkı */
    article .p-5 { padding: 0.85rem; }
    article h3 { font-size: 0.875rem; }
    article .text-sm { font-size: 0.8rem; }
    article .mt-4.flex { gap: 0.4rem; }
    article .mt-4.flex a:first-child { font-size: 0.8rem; padding: 0.55rem 0.5rem; }
    article .mt-4.flex a:last-child { width: 2.5rem; height: 2.5rem; }

    /* CTA butonları mobilde tam genişlik */
    .flex.flex-col.sm\:flex-row { flex-direction: column; }
    .flex.flex-col.sm\:flex-row > a,
    .flex.flex-col.sm\:flex-row > button { width: 100%; justify-content: center; }

    /* Filtre sidebar mobilde */
    aside.lg\:col-span-1 .sticky { position: static; }

    /* Footer grid */
    footer .grid { gap: 2rem; }

    /* Daha az padding */
    .py-16 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
    .py-14 { padding-top: 2rem; padding-bottom: 2rem; }
    .lg\:py-20 { padding-top: 2.5rem; padding-bottom: 2.5rem; }

    /* Top bar daha kompakt */
    .bg-primary-700.text-white\/90 .truncate { max-width: 180px; }
}

@media (max-width: 479px) {
    /* Küçük telefonlar: 2'li grid'i tek kolona düşür */
    .grid.sm\:grid-cols-2.lg\:grid-cols-4 { grid-template-columns: 1fr; }

    /* Header'da gap */
    #site-header .gap-2\.5 { gap: 0.4rem; }
}

/* iOS safe area */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .wa-fab { bottom: calc(1.25rem + env(safe-area-inset-bottom)); }
    #to-top { bottom: calc(1.25rem + env(safe-area-inset-bottom)); }
}

/* Tap target minimum size (A11Y) */
@media (pointer: coarse) {
    a, button { min-height: 44px; min-width: 44px; }
    nav a { min-height: 40px; }
    .nav-link { padding: 0.5rem 0.75rem; }
}

/* Yazdırma */
@media print {
    #site-header, footer, .fixed { display: none !important; }
}

/* ---- Dropdown / Mega menü ---- */
.dropdown-panel {
    transition: opacity .18s ease, visibility .18s ease, transform .18s ease;
    transform: translateY(6px);
}
.dropdown:hover > .dropdown-panel,
.dropdown:focus-within > .dropdown-panel,
.dropdown.is-open > .dropdown-panel {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}
/* x ekseninde ortalanan paneller için transform'u koru */
.dropdown-panel.left-1\/2 { transform: translate(-50%, 6px); }
.dropdown:hover > .dropdown-panel.left-1\/2,
.dropdown:focus-within > .dropdown-panel.left-1\/2,
.dropdown.is-open > .dropdown-panel.left-1\/2 { transform: translate(-50%, 0); }

.dropdown:hover .dropdown-trigger svg:last-child,
.dropdown.is-open .dropdown-trigger svg:last-child { transform: rotate(180deg); }

/* Mobil akordiyon ok dönüşü */
.m-acc-btn[aria-expanded="true"] svg:last-child { transform: rotate(180deg); }
#filter-toggle[aria-expanded="true"] svg:last-child { transform: rotate(180deg); }

/* SSS (details) ok dönüşü ve görünüm */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details[open] > summary svg { transform: rotate(180deg); }

/* Stock görsel kırılınca devreye giren SVG illüstrasyon: kırpma yok */
img.is-illustration { object-fit: contain !important; background: #eef3f5; }


/* ---- Kayan WhatsApp butonu ---- */
.wa-fab > span:last-child::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    background: #25D366;
    opacity: 0.55;
    z-index: -1;
    animation: wa-pulse 2.2s ease-out infinite;
}
@keyframes wa-pulse {
    0%   { transform: scale(1);   opacity: 0.55; }
    70%  { transform: scale(1.6); opacity: 0; }
    100% { transform: scale(1.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .wa-fab > span:last-child::before { animation: none; }
}