/* ==========================================================================
   OR-BEY | Header Hareket Katmanı  (motion-header.css)
   --------------------------------------------------------------------------
   TÜM SAYFALARDA yüklenir. Yalnızca üst menünün davranışını ve hover
   etkilerini içerir; bölüm animasyonları ana sayfaya özeldir (motion.css).

   Header ortak bir dosya (includes/header.php) olduğu için, ana sayfada
   hareketli iç sayfalarda sabit bir menü tutarsız görünürdü. Bu yüzden
   küçülme / gizlenme / alt çizgi / iki katmanlı etiket her sayfada aynı.

   Kural: Buradaki hiçbir kural bir öğeyi gizlemez. JS çalışmazsa menü
   olduğu gibi görünür, sadece hareketsiz olur.
   ========================================================================== */

:root {
    --hiz-yavas: 1.2s;
    --hiz-orta: 0.9s;
    --hiz-hizli: 0.5s;
    --egri: cubic-bezier(0.16, 1, 0.3, 1);   /* expo-out: keskin çıkış, yumuşak oturma */
    --egri-yumusak: cubic-bezier(0.22, 0.61, 0.36, 1);
    --egri-yay: cubic-bezier(0.34, 1.56, 0.64, 1); /* hafif yaylanma */
}

/* ==========================================================================
   1. HEADER DAVRANIŞI
   ========================================================================== */
.header {
    transition: transform 0.65s var(--egri),
                background-color 0.4s ease,
                box-shadow 0.4s ease,
                height 0.4s var(--egri);
}

/* Aşağı inerken gizlenir (JS .gizli sınıfını ekler).
   .header'ın kendi kuralında zaten translateX(-50%) var; ortalamayı
   kaybetmemek için burada da tekrarlıyoruz. */
.header.gizli { transform: translateX(-50%) translateY(-100%); }

/* 40px sonra küçülür ve cam efektine geçer.
   Yalnızca masaüstünde: mobilde header zaten kısa ve logo ölçüsü sitenin
   kendi mobil kuralıyla belirleniyor. Burada boy değiştirmek, kaydırma
   başlar başlamaz logonun bir anlığına büyümesine yol açıyordu. */
@media (min-width: 993px) {
    .header.kucuk {
        height: 72px;
        background: rgba(255, 255, 255, 0.88);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.07);
    }

    .header.kucuk .logo-container { height: 42px; }
}

/* ==========================================================================
   2. MENÜ LİNKLERİ — alt çizgi süpürmesi
   ========================================================================== */
/* Sitenin kendi kuralında .nav-links a konumlandırılmamış; ::after'ın
   yerleşebilmesi için relative yapıyoruz. */
.nav-links a,
.custom-dropdown-header > a {
    position: relative;
    transition: color 0.35s ease;
}

.nav-links > a::after,
.custom-dropdown-header > a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 100%;
    height: 1.5px;
    background: #B39B74;
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 0.45s var(--egri);
}

.nav-links > a:hover,
.custom-dropdown-header > a:hover { color: #B39B74; }

.nav-links > a:hover::after,
.custom-dropdown-header > a:hover::after {
    transform: scaleX(1);
    transform-origin: left center;
}

/* Açılır menü içindeki linklerde alt çizgi yok; onların kendi
   arka plan hover'ı var (header.php içindeki stil bloğu). */
.custom-dropdown-content a::after { display: none; }

/* Logo hover: iki parça hafifçe birbirinden ayrılır */
.logo-container img { transition: transform 0.6s var(--egri); }
.logo-container:hover img:first-child { transform: translateX(-2px); }
.logo-container:hover img:last-child  { transform: translateX(2px); }

/* ==========================================================================
   3. "BİZE ULAŞIN" BUTONU — içeriden dolan koyu katman + kayan ok
   ========================================================================== */
.contact-us-btn { overflow: hidden; }

.contact-us-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #8f7a58;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.5s var(--egri);
    z-index: 1;
}

.contact-us-btn:hover::before { transform: scaleX(1); }

/* Yazı ve ok, dolan katmanın önünde kalmalı.
   DİKKAT: burada position yazılmaz. İkisi de sitenin kendi kuralında
   "position: absolute" ile yerleştirilmiş; buradan relative verilirse
   ok butonun dışına düşer, yazı da genişliğini kaybeder. */
.contact-us-btn .contact-text,
.contact-us-btn .contact-arrow {
    z-index: 2;
}

.contact-us-btn .contact-arrow { transition: transform 0.45s var(--egri); }
.contact-us-btn:hover .contact-arrow { transform: translateX(4px); }

/* Butondaki yazı sitenin kendi kuralında mutlak konumlu (top:12px, height:16px).
   İki katmanlı etiket eklenince satır kutusu değişip yazı aşağı kayıyordu;
   ölçüleri sabitleyerek eski hizasında tutuyoruz. */
.contact-us-btn .contact-text {
    overflow: hidden;
    line-height: 16px;
}

.contact-us-btn .contact-text .kayan {
    display: block;
    height: 16px;
    line-height: 16px;
    vertical-align: top;
}

.contact-us-btn .contact-text .kayan__a,
.contact-us-btn .contact-text .kayan__b {
    height: 16px;
    line-height: 16px;
}

/* ==========================================================================
   4. İKİ KATMANLI ETİKET
   Üzerine gelince yazı yukarı kayar, birebir kopyası alttan gelir.
   JS ([data-kayan]) iki katmanı kurar; kurulmazsa yazı olduğu gibi kalır.
   ========================================================================== */
.kayan {
    position: relative;
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    line-height: inherit;
}

.kayan__a,
.kayan__b {
    display: block;
    transition: transform 0.55s var(--egri);
}

.kayan__b {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    transform: translateY(105%);
}

a:hover .kayan__a,
button:hover .kayan__a,
.contact-btn-desktop:hover .kayan__a { transform: translateY(-105%); }

a:hover .kayan__b,
button:hover .kayan__b,
.contact-btn-desktop:hover .kayan__b { transform: translateY(0); }

/* ==========================================================================
   5. HAREKET AZALTMA TERCİHİ
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .header,
    .header.gizli,
    .logo-container img,
    .contact-us-btn::before,
    .contact-us-btn .contact-arrow,
    .kayan__a,
    .kayan__b {
        transition-duration: 0.001ms !important;
    }

    .header.gizli { transform: translateX(-50%) translateY(0) !important; }
    .kayan__b { display: none; }
}

/* Mobil/tablette menü zaten açılır panelde; alt çizgi ve iki katmanlı
   etiket orada gereksiz kalabalık yaratıyor. */
@media (max-width: 992px) {
    .nav-links > a::after,
    .custom-dropdown-header > a::after { display: none; }
    /* .header.kucuk için mobil geçersiz kılma YOK: küçülme kuralları
       zaten yalnızca 993px ve üzerinde tanımlı. Buradan boy verilirse
       header kaydırma sırasında yeniden boyutlanır. */
}

/* ==========================================================================
   6. YAPIŞKAN İMLEÇ  (magnetic sticky cursor) — TÜM SİTEDE
   Tek parça. Boşta küçük altın bir nokta; bir butonun/linkin üzerine gelince
   o öğenin ölçüsüne ve köşe yarıçapına dönüşerek üstüne oturur ve fareyle
   hafifçe salınır. Büyük kart/görsellerde geniş bir daireye açılır.
   Boyut/şekil geçişleri içteki <i> üzerinde; konumu JS her karede yazar.
   ========================================================================== */
.imlec { display: none; }

@media (hover: hover) and (pointer: fine) and (min-width: 993px) {
    .imlec-acik { cursor: none; }
    .imlec-acik a,
    .imlec-acik button,
    .imlec-acik [data-imlec],
    .imlec-acik .lang-switcher { cursor: none; }
    .imlec-acik input,
    .imlec-acik textarea { cursor: text; }

    .imlec-acik .imlec {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 0;
        height: 0;
        z-index: 9998;
        pointer-events: none;
    }

    .imlec-acik .imlec i {
        position: absolute;
        left: 0;
        top: 0;
        display: block;
        width: var(--ig, 12px);
        height: var(--iy, 12px);
        border-radius: var(--ik, 50%);
        background: var(--iz, #B39B74);
        /* Zemin ile aynı renge denk gelse bile ayırt edilsin diye
           nokta durumunda ince bir kontrast halesi taşır. */
        box-shadow: var(--imlec-golge, none);
        transform: translate(-50%, -50%);
        transition: width 0.4s var(--egri),
                    height 0.4s var(--egri),
                    border-radius 0.4s var(--egri),
                    background-color 0.32s ease,
                    box-shadow 0.32s ease,
                    opacity 0.3s ease;
    }

    /* Fare ilk kez kıpırdayana kadar nokta görünmez (JS .imlec-hazir ekler).
       Aksi halde her sayfa açılışında ekranın ortasında beliriyordu. */
    .imlec-acik:not(.imlec-hazir) .imlec i { opacity: 0; }

    .imlec-acik.imlec-gizli .imlec i { opacity: 0; }
}