/* ==========================================================================
   Gökay Otomotiv - Opel marka dili tema katmanı
   Kaynak: opel.com.tr CSS custom property'leri (--wlb-*)
   Tek tema: açık (light). Opel'in kendi sitesi de tek temalıdır.
   ========================================================================== */

:root {
    /* Marka */
    --o-black:    #000000;
    --o-white:    #FFFFFF;
    --o-volt:     #F7FF14;   /* --wlb-color-brand-1  */
    --o-sky:      #AECAE0;   /* --wlb-color-brand-2  */
    --o-blue:     #3A73A4;   /* --wlb-color-brand-3  */
    --o-navy:     #034D70;   /* --wlb-color-brand-4  */

    /* Nötr ölçek */
    --o-n100:     #F9F9F9;
    --o-n200:     #F3F3F3;
    --o-n300:     #CCCCCC;
    --o-n400:     #737373;
    --o-n500:     #333333;

    /* Anlamsal */
    --o-heading:  #000000;
    --o-body:     #737373;
    --o-hairline: #E6E6E6;
    --o-error:    #D51121;

    /* Yükseklik */
    --o-ev1: 0px 2px 4px 0px rgba(0, 0, 0, 0.24);
    --o-ev2: 0px 5px 10px 0px rgba(0, 0, 0, 0.16);
    --o-ev3: 0px 10px 20px 0px rgba(0, 0, 0, 0.08);

    /* Görsel üstü karartma (Opel --wlb-gradient-black-left) */
    --o-scrim-left: linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(28,31,42,.45) 42%, rgba(28,31,42,0) 82%);
    --o-scrim-bottom: linear-gradient(0deg, rgba(0,0,0,.72) 0%, rgba(28,31,42,0) 62%);

    --o-maxw: 1126px;
    --o-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------------------
   Tipografi
   Opel Next yerine Figtree (görsel karşılaştırmayla eşleştirildi).
   Opel'in imzası: başlıklar KALIN DEĞİL, 400 ağırlıkta ve cümle düzeninde.
   -------------------------------------------------------------------------- */

body {
    font-family: 'Figtree', 'Helvetica Neue', Arial, sans-serif;
    color: var(--o-body);
    background: var(--o-white);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--o-heading);
    font-weight: 400;
    letter-spacing: -0.005em;
}

/* Tailwind'in .font-bold/.font-semibold sınıfları başlıklarda ağırlık kilidini
   aşmasın diye eşit özgüllükte geri alınır. */
h1.font-bold, h2.font-bold, h3.font-bold, h4.font-bold, h5.font-bold, h6.font-bold,
h1.font-semibold, h2.font-semibold, h3.font-semibold, h4.font-semibold,
h5.font-semibold, h6.font-semibold {
    font-weight: 400;
}

h1 { font-size: clamp(2rem, 1.35rem + 2.6vw, 3.25rem); line-height: 1.12; }
h2 { font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);  line-height: 1.2;  }
h3 { font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);  line-height: 1.3;  }

/* Not: Tailwind'in text-* yardımcıları (0,1,0) bu element seçicilerini (0,0,1)
   ezer. Yukarıdaki ölçek yalnızca boyut sınıfı taşımayan başlıklar için geçerlidir;
   sınıf taşıyanlar işaretlemede Opel ölçeğine göre ayarlanmıştır. */

/* --------------------------------------------------------------------------
   Renk düzeltmeleri
   Opel sarısı beyaz üstünde okunmaz (kontrast ~1.1:1). Marka kuralı:
   sarı bir YÜZEY rengidir, açık zeminde yazı rengi değildir.
   Özgüllük :root ile yükseltilir, çünkü Tailwind CDN stilleri sonradan enjekte edilir.
   -------------------------------------------------------------------------- */

:root .text-opel,
:root .text-volt          { color: var(--o-heading); }
:root .hover\:text-opel:hover { color: var(--o-heading); }
:root .group:hover .group-hover\:text-opel { color: var(--o-heading); }

/* Koyu zeminlerde sarı yazı doğru ve erişilebilir (kontrast 18:1). */
:root .on-dark .text-opel,
:root .bg-dark .text-opel,
:root .o-dark .text-opel                       { color: var(--o-volt); }
:root .on-dark .hover\:text-opel:hover,
:root .o-dark .hover\:text-opel:hover          { color: var(--o-volt); }
:root .o-dark .group:hover .group-hover\:text-opel { color: var(--o-volt); }

/* Sarı kenarlık ve odak halkası da açık zeminde görünmez: lacivert kullanılır. */
:root .border-opel                { border-color: var(--o-navy); }
:root .o-dark .border-opel        { border-color: var(--o-volt); }
:root .focus\:ring-opel:focus     { --tw-ring-color: var(--o-navy); }
:root .focus\:border-opel:focus   { border-color: var(--o-navy); }

/* Gövde metni Opel'in --wlb-color-text-body değerine hizalanır. */
:root .text-gray-500,
:root .text-gray-600     { color: var(--o-body); }
:root .text-gray-400     { color: var(--o-body); }   /* #8C8C8C beyaz üstünde 3.36:1 idi */
:root .text-gray-700,
:root .text-gray-800     { color: var(--o-n500); }
:root .border-gray-100,
:root .border-gray-200   { border-color: var(--o-hairline); }
:root .bg-gray-50,
:root .bg-gray-100       { background-color: var(--o-n200); }

/* Klavye odağı her zaman görünür kalır. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--o-navy);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Düğmeler - Opel: hap biçimli, 700 ağırlık, 12px/24px iç boşluk
   -------------------------------------------------------------------------- */

.o-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .625rem;
    padding: .75rem 1.5rem;
    border-radius: 9999px;
    font-size: .9375rem;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: background-color .25s var(--o-ease), color .25s var(--o-ease),
                border-color .25s var(--o-ease), transform .12s ease;
}
.o-btn:active { transform: scale(.98); }

.o-btn--primary   { background: var(--o-black); color: var(--o-white); }
.o-btn--primary:hover { background: var(--o-n500); color: var(--o-white); }

.o-btn--secondary { background: var(--o-white); color: var(--o-black); border-color: var(--o-white); }
.o-btn--secondary:hover { background: var(--o-n200); border-color: var(--o-n200); }

.o-btn--outline   { background: transparent; color: var(--o-black); border-color: var(--o-n300); }
.o-btn--outline:hover { border-color: var(--o-black); background: var(--o-n100); }

.o-btn--volt      { background: var(--o-volt); color: var(--o-black); }
.o-btn--volt:hover { background: var(--o-black); color: var(--o-volt); }

/* --------------------------------------------------------------------------
   Yerleşim
   -------------------------------------------------------------------------- */

.o-wrap    { max-width: var(--o-maxw); margin-inline: auto; padding-inline: 1.25rem; }
.o-section { padding-block: 4.5rem; }
.o-band    { background: var(--o-n100); }
.o-dark    { background: var(--o-black); color: var(--o-n200); }
.o-dark h1, .o-dark h2, .o-dark h3, .o-dark h4, .o-dark h5 { color: var(--o-white); }
.o-rule    { border: 0; border-top: 1px solid var(--o-hairline); }

@media (min-width: 768px) {
    .o-wrap    { padding-inline: 2rem; }
    .o-section { padding-block: 6rem; }
}

/* Bölüm giriş metni: Opel'de küçük, gri, cümle düzeni. Harf aralığı açılmış
   BÜYÜK HARF etiket yok. */
.o-eyebrow {
    display: block;
    font-size: .9375rem;
    font-weight: 400;
    color: var(--o-body);
    letter-spacing: normal;
    text-transform: none;
    margin-bottom: .75rem;
}

.o-lead { font-size: 1.0625rem; line-height: 1.65; color: var(--o-body); max-width: 62ch; }

/* --------------------------------------------------------------------------
   Teaser - Opel'in kart dili: köşesiz görsel, altında chevron'lu bağlantı.
   Kutu, gölge, kenarlık yok.
   -------------------------------------------------------------------------- */

.o-teaser { display: block; background: transparent; }
.o-teaser__media { overflow: hidden; background: var(--o-n200); }
.o-teaser__media img { display: block; width: 100%; height: 100%; object-fit: cover;
    transition: transform .6s var(--o-ease); }
.o-teaser:hover .o-teaser__media img { transform: scale(1.04); }
.o-teaser__body { padding-top: 1.125rem; }

.o-teaser__title {
    display: flex; align-items: baseline; gap: .5rem;
    color: var(--o-heading); font-size: 1.0625rem; line-height: 1.45; font-weight: 400;
}
.o-teaser__title::before {
    content: '\203A';                /* › */
    font-size: 1.25rem; line-height: 1; color: var(--o-heading); flex: none;
    transition: transform .25s var(--o-ease);
}
.o-teaser:hover .o-teaser__title::before { transform: translateX(3px); }

/* Chevron'lu metin bağlantısı */
.o-link {
    display: inline-flex; align-items: baseline; gap: .45rem;
    color: var(--o-heading); font-weight: 700; font-size: .9375rem;
    text-decoration: underline; text-underline-offset: 5px;
    text-decoration-color: var(--o-n300);
    transition: text-decoration-color .25s var(--o-ease);
}
.o-link:hover { text-decoration-color: var(--o-black); }
.o-dark .o-link { color: var(--o-white); text-decoration-color: rgba(255,255,255,.4); }
.o-dark .o-link:hover { text-decoration-color: var(--o-volt); }

/* Sarının doğru kullanımı: ince vurgu şeridi */
.o-volt-rule { display: block; width: 3rem; height: 4px; background: var(--o-volt); }

/* --------------------------------------------------------------------------
   Form - etiket üstte, yardımcı metin altta, köşesiz alanlar
   -------------------------------------------------------------------------- */

.o-field label,
.o-label {
    display: block; font-size: .875rem; font-weight: 700;
    color: var(--o-heading); margin-bottom: .5rem;
}
:root input[type="text"], :root input[type="tel"], :root input[type="email"],
:root input[type="date"], :root input[type="time"], :root select, :root textarea {
    border-radius: 0;
    border: 1px solid var(--o-n300);
    background: var(--o-white);
    color: var(--o-n500);
    transition: border-color .2s ease, box-shadow .2s ease;
}
:root input::placeholder, :root textarea::placeholder { color: #6B6B6B; }  /* #8C8C8C beyaz üstünde 3.36:1 idi */
:root input:focus, :root select:focus, :root textarea:focus {
    border-color: var(--o-navy);
    box-shadow: inset 0 -2px 0 0 var(--o-navy);
    outline: none;
}

/* --------------------------------------------------------------------------
   Hareket: tek bir düzenlenmiş an (sayfa geçişi) + sessiz hover durumları.
   -------------------------------------------------------------------------- */

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

/* --------------------------------------------------------------------------
   Ortak yerleşim bileşenleri (components.js)
   -------------------------------------------------------------------------- */

/* Üst menü bağlantısı: altı çizili büyüyen vurgu, renk değişimi yok */
.o-navlink {
    position: relative;
    color: var(--o-heading);
    font-weight: 500;
    padding-block: .35rem;
}
.o-navlink::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 2px; background: var(--o-black);
    transform: scaleX(0); transform-origin: left;
    transition: transform .3s var(--o-ease);
}
.o-navlink:hover::after { transform: scaleX(1); }

/* Mobil menü satırı */
.o-mobilelink {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.0625rem 0;
    border-bottom: 1px solid var(--o-hairline);
    color: var(--o-heading); font-size: 1.0625rem; font-weight: 400;
}
.o-mobilelink::after {
    content: '\203A';
    font-size: 1.375rem; line-height: 1; color: var(--o-n400);
    transition: transform .25s var(--o-ease);
}
.o-mobilelink:active::after { transform: translateX(3px); }

/* Sayfa altı yapışkan eylem bandı */
.o-bandlink {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .3rem; padding: .625rem .25rem; min-height: 56px;
    color: var(--o-heading); text-align: center; line-height: 1.25;
    transition: background-color .2s ease;
}
.o-bandlink:hover { background: var(--o-n100); }
.o-bandlink__icon { font-size: 1rem; color: var(--o-heading); }
.o-bandlink__label--primary {
    background: var(--o-volt); color: var(--o-black); font-weight: 700;
    padding: .1rem .5rem; border-radius: 9999px;
}
.o-bandlink--dark { color: rgba(255,255,255,.8); }
.o-bandlink--dark .o-bandlink__icon { color: var(--o-volt); }
.o-bandlink--dark:hover { background: rgba(255,255,255,.08); color: #fff; }

@media (min-width: 768px) {
    .o-bandlink { flex-direction: row; gap: .55rem; padding: .875rem .5rem; min-height: 0; }
}

/* Koyu footer bağlantıları */
.o-footlink {
    color: rgba(255,255,255,.65);
    text-align: left;
    transition: color .2s ease;
}
.o-footlink:hover { color: var(--o-volt); }

.o-social {
    width: 2.5rem; height: 2.5rem; border-radius: 9999px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255,255,255,.28); color: #fff; font-size: .9375rem;
    transition: background-color .25s var(--o-ease), color .25s var(--o-ease), border-color .25s var(--o-ease);
}
.o-social:hover { background: var(--o-volt); color: var(--o-black); border-color: var(--o-volt); }

/* Sayfa geçişi perdesi */
.page-transition { background: #000 !important; }

/* Kaydırma sonrası üst çubuk yüksekliği */
#navbar.is-scrolled { box-shadow: var(--o-ev3); }

/* Kahraman görsel karartması - Opel --wlb-gradient-black-left */
.hero-overlay { background: var(--o-scrim-left) !important; }
@media (max-width: 767px) {
    /* Dikey görselde metin alanı parlak gökyüzüne denk geldiği için
       karartma tüm yüzeye yayılır. */
    .hero-overlay {
        background: linear-gradient(0deg,
            rgba(0,0,0,.88) 0%,
            rgba(0,0,0,.70) 42%,
            rgba(0,0,0,.38) 74%,
            rgba(0,0,0,.18) 100%) !important;
    }
}

/* --------------------------------------------------------------------------
   Eski görsel dilin nötrlenmesi
   Sayfalar hâlâ BÜYÜK HARF + geniş aralıklı sarı etiketler, sarı ikonlar ve
   sarı alt çizgiler taşıyor. Bunlar Opel'in sade diline çevrilir.
   -------------------------------------------------------------------------- */

/* Etiketler: cümle düzeni, normal aralık, gri */
:root .uppercase.tracking-widest,
:root .uppercase.tracking-\[0\.2em\],
:root .uppercase.tracking-\[0\.24em\],
:root .uppercase.tracking-\[0\.28em\] {
    text-transform: none;
    letter-spacing: normal;
    font-size: .9375rem;
    font-weight: 400;
    color: var(--o-body);
}

/* Koyu bölümlerdeki etiketler açık gri olur (tüm harf aralığı varyantları) */
:root :is(.o-dark, .bg-dark, .campaign-hero, .text-white)
      :is(.uppercase.tracking-widest,
          .uppercase.tracking-\[0\.2em\],
          .uppercase.tracking-\[0\.24em\],
          .uppercase.tracking-\[0\.28em\]) { color: rgba(255, 255, 255, .82); }

/* Kampanya kahraman bölümü de koyu bağlam sayılır */
:root .campaign-hero .text-opel                 { color: var(--o-volt); }
:root .campaign-hero .hover\:text-opel:hover    { color: var(--o-volt); }
:root .campaign-hero .border-opel               { border-color: var(--o-volt); }

/* Sarı alfa yüzeyler nötr griye çevrilir (beyaz üstünde okunmuyorlar) */
:root .bg-opel\/15,
:root .bg-opel\/20 { background-color: var(--o-n200); }

/* Sarı alt çizgi beyaz üstünde görünmez */
:root .decoration-opel { text-decoration-color: var(--o-black); }

/* Sarı olarak yazılmış metin bağlantıları siyaha döndüğü için altı çizilir */
:root a.text-opel {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--o-n300);
}
:root a.text-opel:hover { text-decoration-color: var(--o-black); }

/* Palet dışı amber hover'lar Opel'in siyah/sarı ikilisine çevrilir */
:root .hover\:bg-yellow-400:hover { background-color: var(--o-black); color: var(--o-volt); }

/* Eski sarı daire ikon kutuları: siyah ikon, nötr zemin */
:root .bg-opel.text-dark.rounded-xl,
:root .bg-opel.rounded-xl { background-color: var(--o-n200); color: var(--o-black); }

/* Koyu zeminli bölümlerde başlıklar beyaz kalmalı.
   h1..h6 için tanımlanan siyah renk, kapsayıcıdan gelen text-white mirasını
   ezdiği için koyu bağlamlar açıkça geri alınır. */
:root .o-dark :is(h1, h2, h3, h4, h5, h6),
:root .bg-dark :is(h1, h2, h3, h4, h5, h6),
:root .campaign-hero :is(h1, h2, h3, h4, h5, h6),
:root .text-white :is(h1, h2, h3, h4, h5, h6) {
    color: #FFFFFF;
}

/* Nötr gri çip üstünde gövde grisi 4.27:1'e düşüyor; çip içi yazı bir ton
   koyulaştırılarak WCAG AA (4.5:1) sağlanır. */
:root .bg-opel\/15.uppercase,
:root .bg-opel\/20.uppercase,
:root .bg-fog .o-eyebrow { color: var(--o-n500); }

/* Koyu zeminde gövde grisi 4.43:1'de kalıyor; açık griye çevrilir. */
:root :is(.o-dark, .bg-dark, .campaign-hero, .text-white) :is(.text-gray-400, .text-gray-500, .text-gray-600, .text-body) {
    color: rgba(255, 255, 255, .78);
}

/* WhatsApp düğmesi yeşil kenarlıklıydı; sayfadaki tek vurgu rengi kuralına
   uyması için Opel'in nötr çerçeveli düğmesine çevrilir.
   (Sarı, randevu eylemini işaretleyen tek vurgu olarak kalır.) */
:root #whatsapp-btn {
    border-color: var(--o-n300);
    color: var(--o-black);
    background: transparent;
}
:root #whatsapp-btn:hover {
    border-color: var(--o-black);
    background: var(--o-n100);
}