/*
Theme Name: Özgen Paslanmaz V3
Theme URI:
Author: Antigravity
Author URI:
Description: Precision Engineered Industrial Theme based on Stitch MCP design.
Version: 3.20.0
Text Domain: ozgenpaslanmaz
*/

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.active-nav {
    border-bottom: 2px solid #ab001e;
    color: #ab001e;
    font-weight: 700;
}

.hero-gradient {
    background: linear-gradient(to top, rgba(255,255,255, .3), rgba(255,255,255, 2));
}

/* Base resets & utilities for WordPress */
img {
    max-width: 100%;
    height: auto;
}

/* Custom Component Styles */
.editorial-shadow {
    box-shadow: 0 20px 40px rgba(26, 28, 28, 0.06);
}

/* Header glass treatment — top-bar + main header tek bir frosted glass
   panel olarak render edilir. macOS/visionOS dilinde: blur(20px) +
   saturate(180%) altındaki rengi koruyarak gerçekçi buzlu cam etkisi
   verir; rgba(255,255,255,0.6) opaklığı arkadaki içerik sezinlenecek
   kadar düşük ama yazı kontrastı için yeterli. Alt kenarda hairline
   ayraç. */
.glass-header {
    background-color: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

/* `backdrop-filter` desteği yoksa bg opaklığı yükseltilir ki yazılar
   yine okunaklı kalsın (Firefox eski sürümleri, macOS Safari < 16). */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .glass-header {
        background-color: rgba(255, 255, 255, 0.95);
    }
}

/* ==========================================================================
   CTA ripple — Material-style click ripple for primary action buttons.
   --------------------------------------------------------------------------
   Class is added to all CTA buttons (header, hero, CTA sections, contact
   form). assets/js/ripple.js spawns a `<span class="ripple-wave">` at
   click coordinates inside the .cta-ripple element. CSS sets up the
   container (relative + overflow-hidden) and animates the wave outward
   from the click point.
   `currentColor` ile çalışır — primary zeminde beyaz text → beyaz ripple,
   beyaz zeminde primary text → kırmızı tinted ripple. Her zemine uyar.
   ========================================================================== */
.cta-ripple {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.cta-ripple .ripple-wave {
    position: absolute;
    border-radius: 9999px;
    background-color: currentColor;
    opacity: 0;
    pointer-events: none;
    transform: scale(0);
    z-index: 0;
    animation: ozgen-ripple 600ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.cta-ripple > *:not(.ripple-wave) {
    position: relative;
    z-index: 1;
}

@keyframes ozgen-ripple {
    0%   { transform: scale(0);   opacity: 0.35; }
    50%  {                        opacity: 0.25; }
    100% { transform: scale(2.5); opacity: 0;    }
}

/* Reduced-motion uyumluluğu — ripple yine spawn edilir ama scale/fade
   süreleri minimum'a iner; klikte bir flash şeklinde algılanır. */
@media (prefers-reduced-motion: reduce) {
    .cta-ripple .ripple-wave {
        animation-duration: 100ms;
    }
}

/* ==========================================================================
   WordPress block + Tailwind utility coexistence
   --------------------------------------------------------------------------
   WP core blocks ship default CSS (is-layout-flex, button anchor padding,
   gallery widths, post-template UL wrapper) that fights Tailwind utilities
   used in our block patterns. These overrides let className utilities on
   .wp-block-* drive the visual appearance.
   ========================================================================== */

/* Group inner-container is layout-transparent so utilities on the outer
   .wp-block-group apply directly to its children. */
.wp-block-group > .wp-block-group__inner-container {
    display: contents;
}

/* Query loop: post-template <ul> is layout-transparent so utilities on
   .wp-block-query apply to its <li> items as direct children. */
.wp-block-query > .wp-block-post-template {
    display: contents;
}
.wp-block-query > .wp-block-post-template > li.wp-block-post {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Tailwind grid wins over WP's `body .is-layout-flex { display:flex }`
   (specificity match required). */
body .wp-block-columns.grid,
body .wp-block-buttons.grid,
body .wp-block-gallery.grid {
    display: grid;
}
body .wp-block-columns.flex,
body .wp-block-buttons.flex,
body .wp-block-gallery.flex {
    display: flex;
}

/* Buttons: anchor fills the wrapper and inherits all visual styling, so
   wrapper utility classes (bg, padding, border, radius) drive appearance.
   Note: the visual padding is on the wrapper, but the inner <a> only
   covers the content box (padding excluded) by default — clicks on the
   padded edge fall through to the wrapper <div> and don't navigate.
   We give the wrapper a positioning context and add an absolutely
   positioned ::after on the anchor that fills the wrapper, so the entire
   button (padding included) becomes the click target. */
.wp-block-button {
    position: relative;
}
.wp-block-button > .wp-block-button__link {
    display: block;
    padding: 0;
    margin: 0;
    background: transparent;
    color: inherit;
    border: 0;
    border-radius: inherit;
    box-shadow: none;
    width: 100%;
    height: 100%;
    /* Inherit ALL typography from the wrapper so .text-lg / .font-bold /
       .uppercase / etc. on .wp-block-button drive the visible button.
       Without these, WP's global-styles-inline.css applies font-size: xs,
       font-family: label, etc. directly to the anchor at (0,0,1)
       specificity, defeating the wrapper's utility classes. */
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    text-align: inherit;
    text-transform: inherit;
    text-decoration: inherit;
}
.wp-block-button > .wp-block-button__link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

/* Gallery: when our grid utility is set, drop WP's hard-coded 50%/33%
   widths and gallery margins so children fill grid cells. */
body .wp-block-gallery.has-nested-images.grid > figure.wp-block-image:not(#individual-image) {
    width: auto;
    max-width: none;
    margin: 0;
}

/* Cover: kill the auto aspect-ratio so min-height alone controls height. */
.wp-block-cover[style*="min-height"] {
    aspect-ratio: auto;
}

/* Hero cover: replicate the original linear-gradient overlay (top->bottom
   dark) instead of the uniform dim a Cover block provides.
   IMPORTANT: theme.json's "black" color palette makes WP emit
   `.has-black-background-color { background-color: ... !important }`
   for the dim span (overlayColor:"black" on the cover). The `background:`
   shorthand alone can't override that bg-color !important — gradient
   would sit on top of solid black and the alpha-transparent regions
   would show black instead of the image. We explicitly set
   `background-color: transparent !important` to override WP's class,
   and use the `background-image` longhand for the gradient. */
.wp-block-cover.is-hero > .wp-block-cover__background.has-background-dim {
    background-color: transparent !important;
    background-image: linear-gradient(to top, rgba(255,255,255, .3), rgba(255,255,255, 2));
    opacity: 1;
}

/* Hero text artık beyaz gradient zemin üzerinde — tüm metinler site
   default text rengine (`on-surface`) çekiliyor. Pattern markup'ı eski
   koyu-zemin hero'yu varsayan inline class'lar (text-white,
   text-surface-container-high) kullandığı için CSS-side override.
   Mevcut kayıtlı anasayfayı re-insert gerektirmez. */
.wp-block-cover.is-hero :where(h1, h2, h3, h4) {
    color: var(--wp--preset--color--on-surface, #1a1c1c) !important;
}

.wp-block-cover.is-hero p:not(.text-primary) {
    color: var(--wp--preset--color--on-surface, #1a1c1c) !important;
}

/* Hero içindeki outline button (text-white + border-white/20) — açık
   zeminde görünmez kalmasın diye on-surface metin + outline-variant
   border'a çekilir. */
.wp-block-cover.is-hero .wp-block-button.is-style-outline {
    border-color: var(--wp--preset--color--outline-variant, rgba(0, 0, 0, 0.2)) !important;
    color: var(--wp--preset--color--on-surface, #1a1c1c) !important;
}

.wp-block-cover.is-hero .wp-block-button.is-style-outline .wp-block-button__link {
    color: inherit;
}

/* Contact page — give the headquarters/inquiry cards a visible overlap
   over the hero (~80px). The card carries lg:-mt-32 (-128px), the
   wrapper carries py-24 (96px top padding) which eats most of it. We
   only adjust the wrapper's top padding (96 → 48) for the block that
   sits right after the hero, so other py-24 wrappers across the site
   remain unaffected. New pattern insertions use pt-12 pb-24 directly,
   so this override is purely for the saved page with the old markup. */
@media (min-width: 1024px) {
    .wp-block-cover.is-contact-hero + .wp-block-group.alignfull.py-24 {
        padding-top: 3rem;
    }
}

/* Contact headquarters card — fixes for the saved page that still has
   the old constrained-layout markup (the pattern source has since been
   updated to use layout:flex on row groups and layout:default on the
   inner heading+paragraph wrapper, but the saved page won't auto-update
   until the user re-inserts the pattern). These rules target only the
   card structure so other is-layout-constrained uses across the site
   are unaffected. */

/* (1) Row container (.flex.is-layout-constrained): zero out the auto-
   margin that WordPress applies to flex items via the constrained
   layout rule. Without this, the icon and the inner content group get
   pushed apart by free-space distribution and gap-4 doesn't behave as
   designed. */
.wp-block-group.flex.is-layout-constrained > * {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* (2) Inside each row, the heading+paragraph wrapper is also
   is-layout-constrained, which auto-centers its h3 and p. Disable that
   so the heading and paragraph share the same left edge as the row's
   content column. */
.wp-block-group.flex.is-layout-constrained > .wp-block-group.is-layout-constrained > * {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* (2b) Suppress WP global-styles' 24px block-gap between consecutive
   children of the inner heading+paragraph wrapper. WP injects (via
   global-styles-inline.css):
       :root :where(.is-layout-constrained) > * + *,
       :root :where(.is-layout-flow) > * + *
       { margin-block-start: var(--wp--style--block-gap); }
   which pushes the paragraph 24px below the h3. We want the tight
   stack (h3.mb-1 = 4px gap, nothing more), so zero it out. The two
   selectors below cover both the saved page (.flex+.is-layout-
   constrained outer row → constrained inner) and the new pattern
   markup (.is-layout-flex outer row → is-layout-flow inner). */
.wp-block-group.flex.is-layout-constrained > .wp-block-group > *,
.wp-block-group.is-layout-flex > .wp-block-group > * {
    margin-block-start: 0 !important;
}

/* (3) Pin the headquarters card's background on hover — the saved
   markup still has the .hover\:bg-surface-container-low utility class
   on the card, but the user wants the card static. The full class
   chain (bg-surface-container-lowest + lg:-mt-32 + hover:bg-surface-
   container-low) uniquely identifies the card so we don't accidentally
   suppress hover transitions on other elements. */
.wp-block-group.bg-surface-container-lowest.lg\:-mt-32.hover\:bg-surface-container-low:hover {
    background-color: var(--wp--preset--color--surface-container-lowest, #ffffff);
}

/* (4) Re-apply the .lg:-mt-32 negative top margin at higher specificity.
   WP's global-styles-inline.css contains
       :root :where(.is-layout-constrained) > :first-child { margin-block-start: 0 }
   which has (0,1,1) specificity and wins over our utility's (0,1,0).
   This rule's full class chain bumps specificity to (0,3,1) so the card
   actually floats over the hero. We set both physical (margin-top) and
   logical (margin-block-start) so the cascade resolves consistently
   regardless of how the browser orders physical/logical longhands. */
@media (min-width: 1024px) {
    .wp-block-group.bg-surface-container-lowest.lg\:-mt-32 {
        margin-top: -8rem;
        margin-block-start: -8rem;
    }
}

/* Contact hero: light gradient anchored to bottom (surface-dim fading to
   transparent at top) so dark headlines remain legible at the bottom of the
   image. Layered via ::before because Gutenberg drops the dim layer when
   dimRatio is 0; ::before keeps the gradient independent of that flag. */
.wp-block-cover.is-contact-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top, #dadada 0%, rgba(218, 218, 218, 0.85) 35%, rgba(218, 218, 218, 0) 75%);
    pointer-events: none;
}
.wp-block-cover.is-contact-hero > .wp-block-cover__inner-container {
    position: relative;
    z-index: 2;
}

/* Contact map: render the bg image grayscale + dimmed, matching the
   architectural map aesthetic from the original design. */
.wp-block-cover.is-map-section {
    background-color: #e2e2e2;
}
.wp-block-cover.is-map-section > img.wp-block-cover__image-background {
    filter: grayscale(1);
    opacity: 0.8;
}

/* References hero image: bottom-anchored surface-dim gradient overlaying the
   industrial photo. Same ::before strategy as the contact hero. */
.wp-block-cover.is-references-hero-image::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top, #dadada, transparent);
    pointer-events: none;
}

/* References CTA: subtle radial wash so the headline lifts off the flat
   surface tone without needing a hero image. */
.wp-block-group.is-references-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: radial-gradient(ellipse at center, #e2e2e2 0%, #f9f9f9 60%, #f9f9f9 100%);
    opacity: 0.5;
    pointer-events: none;
}

/* About hero: bottom-anchored surface-dim gradient so the dark headline
   sits readably over the bright manufacturing facility image. Surface
   (#f9f9f9) was too close to the image's bright bottom to register
   visually; surface-dim (#dadada) gives the contrast the design needs. */
.wp-block-cover.is-about-hero {
    position: relative;
}
.wp-block-cover.is-about-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top, #dadada 0%, rgba(218, 218, 218, 0.7) 40%, rgba(218, 218, 218, 0) 80%);
    pointer-events: none;
}
.wp-block-cover.is-about-hero > .wp-block-cover__inner-container {
    position: relative;
    z-index: 2;
    width: 100%;
}

/* About timeline: column wrapper has display:contents (from the global
   group rule), but we still need its outer container to provide the
   relative origin for the absolute vertical line + dot markers. */
.wp-block-group.is-about-timeline {
    position: relative;
}

/* Product detail — applications sidebar list: replace default bullets
   with a small red dot, flex-aligned with the item text. */
.wp-block-list.is-product-applications-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}
.wp-block-list.is-product-applications-list li {
    display: flex;
    align-items: center;
}
.wp-block-list.is-product-applications-list li::before {
    content: "";
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background-color: #ab001e;
    margin-right: 0.75rem;
    flex-shrink: 0;
}

/* ==========================================================================
   Primary nav top-level link — animated underline + chevron rotate
   --------------------------------------------------------------------------
   Walker (inc/nav-walker.php) yalnızca `.nav-link` (+ `.is-current`)
   semantic class'ı veriyor; tüm görsel davranış burada. Hover/focus/
   current durumda primary color + center'dan açılan alt çizgi; has-mega
   case'inde sağda chevron, açılım'da 180° dönüyor.
   ========================================================================== */

.primary-nav .nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.625rem 0;
    font-family: var(--wp--preset--font-family--label, 'Inter', sans-serif);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--wp--preset--color--on-surface, #1a1c1c);
    text-decoration: none;
    white-space: nowrap;
    transition: color 200ms ease;
}

.primary-nav .nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--wp--preset--color--primary, #ab001e);
    border-radius: 1px;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 250ms ease;
}

.nav-link-chevron {
    font-size: 1.125rem;
    line-height: 1;
    margin-right: -0.125rem;
    transition: transform 250ms ease;
}

/* Hover / focus / current — primary color + underline scale */
.primary-nav .nav-link:hover,
.primary-nav .nav-link:focus-visible,
.primary-nav .nav-item.has-mega:hover > .nav-link,
.primary-nav .nav-item.has-mega:focus-within > .nav-link,
.primary-nav .nav-link.is-current {
    color: var(--wp--preset--color--primary, #ab001e);
}

.primary-nav .nav-link:hover::after,
.primary-nav .nav-link:focus-visible::after,
.primary-nav .nav-item.has-mega:hover > .nav-link::after,
.primary-nav .nav-item.has-mega:focus-within > .nav-link::after,
.primary-nav .nav-link.is-current::after {
    transform: scaleX(1);
}

/* Chevron flip when mega panel opens */
.primary-nav .nav-item.has-mega:hover > .nav-link .nav-link-chevron,
.primary-nav .nav-item.has-mega:focus-within > .nav-link .nav-link-chevron {
    transform: rotate(180deg);
}

.primary-nav .nav-link:focus-visible {
    outline: none; /* underline + color shift signal yeterli */
}

/* ==========================================================================
   Mega menu (primary navigation)
   --------------------------------------------------------------------------
   Top-level items with children are wrapped in .nav-item.has-mega; the
   absolutely-positioned .mega panel anchors against the fixed <header>
   (the nearest positioned ancestor) so it spans the full viewport width.
   Hover/focus on the trigger reveals the panel; an invisible ::before
   bridge above .mega keeps the hover state stable across the gap between
   the trigger anchor and the panel.
   ========================================================================== */

.nav-item.has-mega {
    position: static; /* let .mega align to <header>, not to this item */
}

.mega {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #ffffff;
    box-shadow: 0 20px 40px rgba(26, 28, 28, 0.08);
    border-top: 2px solid #ab001e;
    padding: 2.5rem 2rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    z-index: 60;
}

/* Bridge the gap between the trigger anchor and the panel so the cursor
   doesn't leave a hover surface mid-traverse. */
.mega::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 24px;
}

.nav-item.has-mega:hover > .mega,
.nav-item.has-mega:focus-within > .mega,
.nav-item.has-mega > .mega:hover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.mega-grid {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2.5rem;
}

.mega-col {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* Inside each mega column the link list is now a real <ul>. Replicate
   the previous flat-anchor visual rhythm with flex column + 0.25rem gap
   and strip default browser list styling. */
.mega-col-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Defensive list-item resets — preflight already handles ul/ol margin
   and padding, but list items inside the mega menu structure get this
   explicit reassurance so no global rule introduces unexpected spacing. */
.primary-nav > .nav-item,
.mega-grid > .mega-col,
.mega-col-list > li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mega-title {
    font-family: 'Manrope', sans-serif;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #ab001e;
    padding-bottom: 0.75rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid #e5e5e5;
}

.mega-link {
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: #1a1c1c;
    padding: 0.4rem 0;
    text-decoration: none;
    transition: color 0.2s ease, padding-left 0.2s ease;
}

.mega-link:hover {
    color: #ab001e;
    padding-left: 0.25rem;
}

.mega-more {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #e5e5e5;
    font-family: 'Inter', sans-serif;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #ab001e;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.mega-more:hover {
    opacity: 0.75;
}

.mega-more::after {
    content: " →";
}

/* Product detail — technical specs table: rounded card on white surface,
   alternating row tones, soft editorial shadow. Overrides wp:table
   defaults so the user can stay on the wp:table block in the editor. */
.wp-block-table.is-product-specs-table {
    background-color: #ffffff;
    border-radius: 0.25rem;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(26, 28, 28, 0.04);
    margin: 0;
}
.wp-block-table.is-product-specs-table table {
    border-collapse: collapse;
    width: 100%;
}
.wp-block-table.is-product-specs-table th,
.wp-block-table.is-product-specs-table td {
    padding: 1rem 1.5rem;
    text-align: left;
    font-size: 0.875rem;
    line-height: 1.5;
    border: 0;
}
.wp-block-table.is-product-specs-table th {
    font-weight: 600;
    color: #1a1c1c;
    width: 35%;
}
.wp-block-table.is-product-specs-table td {
    color: #5f5e5e;
}
.wp-block-table.is-product-specs-table tbody tr:nth-child(even) th,
.wp-block-table.is-product-specs-table tbody tr:nth-child(even) td {
    background-color: #f3f3f3;
}

/* ==========================================================================
   Semantic component classes
   --------------------------------------------------------------------------
   Recurring utility-class chains (see CLAUDE.md "Architecture") extracted
   into single semantic classes. Each class is functionally identical to
   the utility chain it replaces; refactored pattern markup uses the
   semantic class while saved page content still using the original
   utilities continues to render correctly via theme.css.
   ========================================================================== */

/* Section wrapper at max-w-screen-2xl with horizontal padding. Used as the
   outermost content container in nearly every page section. Vertical
   padding stays as a utility (py-24, pt-12 pb-24, etc.) so each section
   can pick its own rhythm. Mirrors `max-w-screen-2xl mx-auto px-8 w-full`. */
.section-2xl {
    max-width: 1536px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 2rem;
    padding-right: 2rem;
}

/* Contact headquarters card row — icon + heading/paragraph stack.
   Mirrors `flex items-start gap-4`. */
.contact-row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

/* The square icon box that begins each contact row. Mirrors
   `w-12 h-12 bg-surface-container-low rounded-lg flex items-center justify-center shrink-0`. */
.contact-row-icon {
    width: 3rem;
    height: 3rem;
    background-color: var(--wp--preset--color--surface-container-low, #f3f3f3);
    border-radius: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Product card hover container — used in archive-products.php and
   template-products.php product grid. Mirrors `group relative
   bg-surface-container-lowest overflow-hidden transition-all duration-500
   hover:shadow-2xl` and bakes the `group:hover` semantics into descendant
   selectors so existing `group-hover:` utilities inside the card still
   trigger without keeping the `group` class on the markup. */
.product-card {
    position: relative;
    background-color: var(--wp--preset--color--surface-container-lowest, #ffffff);
    overflow: hidden;
    transition-property: all;
    transition-duration: 500ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.product-card:hover {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
.product-card:hover .group-hover\:scale-110           { transform: scale(1.1); }
.product-card:hover .group-hover\:grayscale-0         { filter: grayscale(0); }
.product-card:hover .group-hover\:translate-y-0       { transform: translateY(0); }
.product-card:hover .group-hover\:pointer-events-auto { pointer-events: auto; }

/* Catalog page main container — products archive + page template.
   Originally mirrored `pt-24 pb-20 px-8 max-w-[1600px] mx-auto`.
   Top padding bumped to 8rem (was 6rem) to clear the new top bar
   (32px) + main header (~72px) combined fixed area, with ~24px
   breathing room. */
.catalog-page-main {
    padding-top: 8rem;
    padding-bottom: 5rem;
    padding-left: 2rem;
    padding-right: 2rem;
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
}

/* Footer column link — gray text, red hover, slight rightward shift.
   Mirrors `text-zinc-400 hover:text-red-500 hover:translate-x-1
   transition-all duration-200 block text-sm`. */
.footer-link {
    display: block;
    color: #a1a1aa;
    font-size: 0.875rem;
    line-height: 1.25rem;
    text-decoration: none;
    transition-property: all;
    transition-duration: 200ms;
}
.footer-link:hover {
    color: #ef4444;
    transform: translateX(0.25rem);
}

/* footer'da wp_nav_menu ile gelen <ul class="footer-menu-list">
   her <li> > <a> kombinasyonu otomatik footer-link gibi davransın.
   wp_nav_menu kendi <li> markupını veriyor; <a>'yı utility class'a
   hookluyoruz. */
.footer-menu-list li a {
    display: block;
    color: #a1a1aa;
    font-size: 0.875rem;
    line-height: 1.25rem;
    text-decoration: none;
    transition: color 200ms, transform 200ms;
}
.footer-menu-list li a:hover {
    color: #ef4444;
    transform: translateX(0.25rem);
}

/* Sosyal medya ikonları — footer'da koyu zemin üstünde kare kart.
   header'ın `.top-bar-social`'ından farklı: 40x40 buton, zinc-900 bg,
   beyaz icon → kırmızı hover. */
.footer-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    background-color: #18181b; /* zinc-900 */
    color: #ffffff;
    text-decoration: none;
    transition: background-color 200ms ease, color 200ms ease, transform 200ms ease;
}
.footer-social svg {
    width: 1.125rem;
    height: 1.125rem;
    display: block;
}
.footer-social:hover {
    background-color: var(--wp--preset--color--primary, #ab001e);
    color: #ffffff;
    transform: translateY(-2px);
}
.footer-social:focus-visible {
    outline: 2px solid var(--wp--preset--color--primary, #ab001e);
    outline-offset: 3px;
}

/* ==========================================================================
   Section title cluster — tighten the gap between an uppercase
   "eyebrow" element (red text-primary, small uppercase, used across
   block patterns as a section pre-title) and the heading right after.
   WP's global-styles-inline.css adds margin-block-start: 24px to
   consecutive children of constrained-layout groups, which is too wide
   for an eyebrow→heading pair. Zeroing the heading's block-start lets
   the eyebrow's own margin-bottom (its mb-2 / mb-4 utility class) be
   the only contributor to the gap, so authors control spacing per
   section by tweaking that utility.
   ========================================================================== */
.text-primary.uppercase + h1,
.text-primary.uppercase + h2,
.text-primary.uppercase + h3,
.text-primary.uppercase + h4,
.text-primary.uppercase + .wp-block-heading {
    margin-block-start: 0 !important;
}

/* ==========================================================================
   Top bar links (rendered by Ozgen_Top_Bar_Walker into the fixed header)
   ========================================================================== */
.top-bar-link {
    color: var(--wp--preset--color--secondary, #5f6368);
    text-decoration: none;
    line-height: 1;
    transition: color 180ms ease;
}
.top-bar-link:hover {
    color: var(--wp--preset--color--primary, #ab001e);
}
.top-bar-link:focus-visible {
    outline: 2px solid var(--wp--preset--color--primary, #ab001e);
    outline-offset: 3px;
    border-radius: 2px;
}

/* Top bar — main header'dan ince hairline ayraçla bölünür ama aynı
   glass panel'in parçası olarak hisseder. */
.top-bar-divider {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* Telefon link'i — call icon + numara, top-bar-link rengini miras alır,
   ikon top-bar text-xs ile uyumlu küçük boyutta. */
.top-bar-phone {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-variant-numeric: tabular-nums;
}
.top-bar-phone .material-symbols-outlined {
    font-size: 1rem;
    line-height: 1;
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 20;
}

/* Sosyal medya ikonları — SVG brand glyph'leri currentColor ile renkleniyor,
   hover'da primary'ye geçer. Buton boyutu 24x24 (focus ring rahat sığsın),
   SVG 16x16. */
.top-bar-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--wp--preset--color--secondary, #5f6368);
    text-decoration: none;
    transition: color 180ms ease, transform 180ms ease;
}
.top-bar-social svg {
    width: 1rem;
    height: 1rem;
    display: block;
}
.top-bar-social:hover {
    color: var(--wp--preset--color--primary, #ab001e);
    transform: translateY(-1px);
}
.top-bar-social:focus-visible {
    outline: 2px solid var(--wp--preset--color--primary, #ab001e);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ==========================================================================
   Mobile drawer (slide-page navigation)
   --------------------------------------------------------------------------
   Behaviour and JS contract documented in assets/js/mobile-drawer.js.
   Markup is emitted by header.php; menu items by
   ozgenpaslanmaz_render_mobile_drawer_menu() in inc/nav-walker.php.

   Visible only below md (768px) — at md+ the desktop mega menu takes
   over and the burger button itself is hidden via .md\:hidden.
   ========================================================================== */

#mobile-drawer {
    position: fixed;
    inset: 0;
    z-index: 90;
    pointer-events: none; /* overlay + panel each manage their own */
}

#mobile-drawer .md-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity 250ms ease-out;
    pointer-events: auto;
}

#mobile-drawer .md-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    max-width: 380px;
    background-color: var(--wp--preset--color--surface, #f9f9f9);
    box-shadow: -20px 0 40px rgba(26, 28, 28, 0.10);
    transform: translateX(100%);
    transition: transform 320ms ease-out;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

@media (max-width: 499px) {
    #mobile-drawer .md-panel {
        max-width: 100vw;
    }
}

#mobile-drawer.is-open .md-overlay {
    opacity: 1;
}

#mobile-drawer.is-open .md-panel {
    transform: translateX(0);
}

/* --- Header (sticky inside the panel) ------------------------------- */
#mobile-drawer .md-header {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    min-height: 64px;
    border-bottom: 1px solid var(--wp--preset--color--surface-dim, #dadada);
    background-color: var(--wp--preset--color--surface, #f9f9f9);
}

#mobile-drawer .md-back,
#mobile-drawer .md-close {
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    border-radius: 0.25rem;
    cursor: pointer;
    color: var(--wp--preset--color--on-surface, #1a1c1c);
    transition: color 150ms ease, background-color 150ms ease;
}

#mobile-drawer .md-back:hover,
#mobile-drawer .md-back:focus-visible,
#mobile-drawer .md-close:hover,
#mobile-drawer .md-close:focus-visible {
    color: var(--wp--preset--color--primary, #ab001e);
    background-color: var(--wp--preset--color--surface-container-low, #f3f3f3);
    outline: none;
}

#mobile-drawer .md-back[hidden] {
    display: none;
}

#mobile-drawer .md-title {
    flex: 1 1 auto;
    margin: 0;
    font-family: var(--wp--preset--font-family--headline, 'Manrope', sans-serif);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--wp--preset--color--on-surface, #1a1c1c);
    /* Truncate long titles instead of wrapping the chrome row. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Page stack ----------------------------------------------------- */
#mobile-drawer .md-pages {
    position: relative;
    flex: 1 1 auto;
    overflow: hidden;
}

#mobile-drawer .md-page {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0.5rem 0;
    list-style: none;
    background-color: var(--wp--preset--color--surface, #f9f9f9);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(100%);
    transition: transform 280ms ease-out;
    pointer-events: none;
}

#mobile-drawer .md-page.is-active {
    transform: translateX(0);
    pointer-events: auto;
}

#mobile-drawer .md-page.is-prev {
    /* Sliding off to the left as a deeper page replaces it. */
    transform: translateX(-30%);
    opacity: 0.4;
}

#mobile-drawer .md-page.is-next {
    /* Sliding off to the right as we pop back to the previous page. */
    transform: translateX(100%);
}

/* --- Rows ----------------------------------------------------------- */
#mobile-drawer .md-page li {
    margin: 0;
    padding: 0;
    list-style: none;
}

#mobile-drawer .md-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 56px;
    padding: 0.875rem 1.5rem;
    background-color: transparent;
    border: 0;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    gap: 1rem;
    font-family: var(--wp--preset--font-family--headline, 'Manrope', sans-serif);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--wp--preset--color--on-surface, #1a1c1c);
    transition: background-color 150ms ease, color 150ms ease;
}

#mobile-drawer .md-row > span:first-child {
    flex: 1 1 auto;
}

#mobile-drawer .md-row:hover,
#mobile-drawer .md-row:focus-visible {
    background-color: var(--wp--preset--color--surface-container-low, #f3f3f3);
    color: var(--wp--preset--color--primary, #ab001e);
    outline: none;
}

#mobile-drawer .md-row .material-symbols-outlined {
    flex: 0 0 auto;
    font-size: 1.25rem;
    color: var(--wp--preset--color--primary, #ab001e);
}

/* --- Body scroll lock ---------------------------------------------- */
body.md-body-locked {
    overflow: hidden;
}

/* --- Reduced motion ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    #mobile-drawer .md-overlay,
    #mobile-drawer .md-panel,
    #mobile-drawer .md-page {
        transition: none !important;
    }
}

/* --- Hide drawer entirely on tablet+ (md and up) -------------------- */
@media (min-width: 768px) {
    #mobile-drawer {
        display: none !important;
    }
}

/* ==================================================================
 * Ürün detay sayfası — sekme nav + bölüm tipografisi + galeri grid
 * single-products.php gövdesinden render ediliyor; içerik
 * `inc/product-meta-boxes.php` admin panelinden geliyor.
 *
 * Tab UI: JS-driven content switcher (assets/js/product-tabs.js).
 * Tıklanan tab aktif olur; diğerleri `hidden` attribute ile gizlenir.
 * ================================================================== */

/* Pill segmented control — açık gri tray üzerinde aktif tab beyaz +
   editorial-shadow + primary text. Hero/CTA button'larındaki inset top
   highlight ve yumuşak gölge dilini takip eder. */
.product-tabs-wrap {
    margin-top: 4rem;
    display: flex;
    justify-content: center;
    padding: 0 1rem;
}

.product-tabs {
    display: inline-flex;
    align-items: stretch;
    gap: 0.25rem;
    padding: 0.375rem;
    background: var(--wp--preset--color--surface-container, #ececec);
    border-radius: 1rem;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 100%;
}

.product-tab {
    appearance: none;
    background: transparent;
    border: 0;
    border-radius: 0.75rem;
    padding: 0.75rem 1.5rem;
    font-family: var(--wp--preset--font-family--label, 'Inter', sans-serif);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--wp--preset--color--secondary, #5f6368);
    cursor: pointer;
    transition: color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
    white-space: nowrap;
}

.product-tab:hover {
    color: var(--wp--preset--color--on-surface, #1a1c1c);
}

.product-tab:focus-visible {
    outline: 2px solid var(--wp--preset--color--primary, #ab001e);
    outline-offset: 2px;
}

.product-tab.is-active {
    background: var(--wp--preset--color--surface-container-lowest, #ffffff);
    color: var(--wp--preset--color--primary, #ab001e);
    font-weight: 700;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 1px 2px rgba(26, 28, 28, 0.05),
        0 4px 12px rgba(26, 28, 28, 0.08);
}

.product-tab.is-active:hover {
    color: var(--wp--preset--color--primary, #ab001e);
}

@media (max-width: 640px) {
    .product-tabs {
        gap: 0.125rem;
        padding: 0.25rem;
    }
    .product-tab {
        padding: 0.625rem 1rem;
        font-size: 0.75rem;
    }
}

/* Tab paneller — aynı anda yalnızca biri görünür. Aktif panel beyaz
   kart olarak yükselir: rounded + editorial-shadow ile pill tray ve
   tablo dilinin aynısı. py-16 wrapper padding'i panel'in dışındadır;
   panel kendi iç padding'iyle nefes alır. */
.product-panel {
    background: var(--wp--preset--color--surface-container-lowest, #ffffff);
    border-radius: 1rem;
    padding: 2.5rem 3rem;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 1px 2px rgba(26, 28, 28, 0.04),
        0 20px 40px rgba(26, 28, 28, 0.06);
}

.product-panel:focus {
    outline: none;
}

.product-panel[hidden] {
    display: none;
}

@media (max-width: 640px) {
    .product-panel {
        padding: 1.75rem 1.5rem;
        border-radius: 0.75rem;
    }
}

/* WYSIWYG içerik — metabox'tan gelen wp_kses_post markup'ı */
.product-section-content {
    color: var(--wp--preset--color--on-surface, #1a1c1c);
    font-family: var(--wp--preset--font-family--body, 'Inter', sans-serif);
    font-size: 1rem;
    line-height: 1.7;
}

.product-section-content > * + * {
    margin-top: 1rem;
}

.product-section-content h3,
.product-section-content h4 {
    font-family: var(--wp--preset--font-family--headline, 'Manrope', sans-serif);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--wp--preset--color--on-surface, #1a1c1c);
    margin-top: 2rem;
}

.product-section-content h3 {
    font-size: var(--wp--preset--font-size--xl, 1.25rem);
}

.product-section-content h4 {
    font-size: var(--wp--preset--font-size--lg, 1.125rem);
}

.product-section-content p {
    margin: 0;
}

.product-section-content ul,
.product-section-content ol {
    margin: 0;
    padding-left: 1.5rem;
}

.product-section-content li + li {
    margin-top: 0.5rem;
}

.product-section-content a {
    color: var(--wp--preset--color--primary, #ab001e);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.product-section-content hr {
    margin: 2rem 0;
    border: 0;
    border-top: 1px solid var(--wp--preset--color--outline-variant, #e0e0e0);
}

/* Tab içeriğinde TinyMCE'den çıkan düz <table> — pill tab'larla aynı
   estetik: beyaz kart + rounded + editorial-shadow + alternating rows.
   Tipografi `.product-section-content` body'sinden inherit eder
   (font-size: 1rem, line-height: 1.7, color: on-surface) — tüm
   metinlerle bütünlük için. */
.product-section-content table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--wp--preset--color--surface-container-lowest, #ffffff);
    border-radius: 1rem;
    overflow: hidden;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 1px 2px rgba(26, 28, 28, 0.04),
        0 20px 40px rgba(26, 28, 28, 0.06);
    margin: 1.5rem 0;
    /* Tipografi'yi açıkça body değerlerine eşitliyoruz — browser
       user-agent <table>'ı parent'tan inherit etmez (font-size: medium
       set'lenir) ve WP global-styles bazı tema kombinasyonlarında
       td/th'lara 14px shrink uygulayabilir. */
    font-size: 1rem;
    font-family: var(--wp--preset--font-family--body, 'Inter', sans-serif);
    line-height: 1.7;
    color: var(--wp--preset--color--on-surface, #1a1c1c);
}

.product-section-content thead th,
.product-section-content tbody th,
.product-section-content tbody td {
    font-size: inherit;
    font-family: inherit;
    line-height: inherit;
    color: inherit;
    padding: 1rem 1.5rem;
    text-align: left;
    border: 0;
    vertical-align: top;
}

.product-section-content thead th {
    background: var(--wp--preset--color--surface-container, #ececec);
    font-weight: 700;
}

.product-section-content tbody th {
    font-weight: 600;
    width: 35%;
    background: transparent;
}

.product-section-content tbody td {
    font-weight: 400;
}

/* Çift sıralarda hafif tray tonu — pill tab tray'iyle aynı renk
   (surface-container) ama %55 opacity ile yumuşatılmış. */
.product-section-content tbody tr:nth-child(even) th,
.product-section-content tbody tr:nth-child(even) td {
    background: color-mix( in srgb, var(--wp--preset--color--surface-container, #ececec) 55%, transparent );
}

/* color-mix desteği yoksa fallback — düz açık gri. */
@supports not ( background: color-mix( in srgb, red 50%, blue ) ) {
    .product-section-content tbody tr:nth-child(even) th,
    .product-section-content tbody tr:nth-child(even) td {
        background: #f5f5f5;
    }
}

/* Mobil: padding küçülür; font size body'den inherit ettiği için
   ayrıca dokunmuyoruz — site geneliyle aynı kalır. */
@media (max-width: 640px) {
    .product-section-content thead th,
    .product-section-content tbody th,
    .product-section-content tbody td {
        padding: 0.75rem 1rem;
    }
    .product-section-content tbody th {
        width: 40%;
    }
}

/* Galeri grid */
.product-gallery-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1rem;
}

@media (min-width: 768px) {
    .product-gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .product-gallery-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.25rem;
    }
}

.product-gallery-grid > a {
    display: block;
    overflow: hidden;
    border-radius: 0.5rem;
    background: var(--wp--preset--color--surface-container-low, #f5f5f5);
}

.product-gallery-grid img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform 350ms ease;
}

.product-gallery-grid > a:hover img,
.product-gallery-grid > a:focus-visible img {
    transform: scale(1.04);
}

/* ============================================================
 * Contact Form 7 — site design diline override
 * (input/textarea = bg-surface-container-low, submit = bg-primary
 * + lift-on-hover, validation = error palette, response output =
 * outline'lı banner). Eski statik form'un birebir görsel eşi.
 * ============================================================ */

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form textarea {
    width: 100%;
    background-color: var(--wp--preset--color--surface-container-low, #f5f5f5);
    border: none;
    border-radius: 0;
    padding: 1rem;
    font-family: var(--wp--preset--font-family--body, 'Inter', sans-serif);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--wp--preset--color--on-surface, #1a1c1c);
    box-shadow: none;
    outline: 2px solid transparent;
    outline-offset: 0;
    transition: outline-color 200ms ease, background-color 200ms ease;
}

.wpcf7-form input:focus,
.wpcf7-form textarea:focus {
    outline-color: color-mix(in srgb, var(--wp--preset--color--primary, #ab001e) 40%, transparent);
}

.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder {
    color: color-mix(in srgb, var(--wp--preset--color--on-surface-variant, #444748) 50%, transparent);
}

.wpcf7-form textarea {
    resize: none;
}

/* Submit — eski .cta-ripple .bg-primary butonuyla aynı. */
.wpcf7-form .wpcf7-submit {
    width: 100%;
    background-color: var(--wp--preset--color--primary, #ab001e);
    color: var(--wp--preset--color--on-primary, #ffffff);
    padding: 1rem 2.5rem;
    border: none;
    border-radius: 0.75rem;
    font-family: var(--wp--preset--font-family--label, 'Inter', sans-serif);
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(171, 0, 30, 0.2);
    transition: transform 200ms ease, box-shadow 200ms ease, opacity 200ms ease;
}

@media (min-width: 768px) {
    .wpcf7-form .wpcf7-submit {
        width: auto;
    }
}

.wpcf7-form .wpcf7-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 30px rgba(171, 0, 30, 0.3);
}

.wpcf7-form .wpcf7-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: 0 10px 20px rgba(171, 0, 30, 0.2);
}

/* Validation tip (alanın altında küçük kırmızı uyarı). */
.wpcf7-form .wpcf7-not-valid-tip {
    color: var(--wp--preset--color--error, #ba1a1a);
    font-size: 0.875rem;
    margin-top: 0.375rem;
    font-family: var(--wp--preset--font-family--label, 'Inter', sans-serif);
}

.wpcf7-form .wpcf7-not-valid {
    outline-color: var(--wp--preset--color--error, #ba1a1a);
}

/* Response output (form altındaki başarı/hata mesaj kutusu). */
.wpcf7-form .wpcf7-response-output {
    margin: 1.5rem 0 0;
    padding: 1rem 1.25rem;
    border-radius: 0.5rem;
    border: 1px solid var(--wp--preset--color--outline-variant, rgba(0, 0, 0, 0.12));
    font-family: var(--wp--preset--font-family--body, 'Inter', sans-serif);
    font-size: 0.95rem;
    line-height: 1.5;
}

.wpcf7-form.sent .wpcf7-response-output {
    border-color: color-mix(in srgb, var(--wp--preset--color--primary, #ab001e) 50%, transparent);
    background-color: color-mix(in srgb, var(--wp--preset--color--primary, #ab001e) 6%, white);
    color: var(--wp--preset--color--on-surface, #1a1c1c);
}

.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.unaccepted .wpcf7-response-output,
.wpcf7-form.payment-required .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.aborted .wpcf7-response-output,
.wpcf7-form.spam .wpcf7-response-output {
    border-color: color-mix(in srgb, var(--wp--preset--color--error, #ba1a1a) 50%, transparent);
    background-color: color-mix(in srgb, var(--wp--preset--color--error, #ba1a1a) 6%, white);
    color: var(--wp--preset--color--error, #ba1a1a);
}

/* AJAX spinner — submit yanında dönen küçük daire. */
.wpcf7-spinner {
    background-color: var(--wp--preset--color--primary, #ab001e);
}

/* CF7 Honeypot — eklenti zaten gizliyor ama defansif olarak burada da
   tamamen DOM-akışından kaldırılır (overflow hidden gibi parent senaryolarında
   görünmesin). */
.wpcf7-form .wpcf7-honeypot-container {
    position: absolute !important;
    left: -9999px !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}