/* ============================================================================
   KAYDIRMA İPUCU (.kip) — yatay kayan alanlarda "devamı var" göstergesi

   Anasayfada birkaç alan mobilde yatay kayar (hikayeler şeridi, Popüler
   Aramalar sekme/çipleri, SSS sekmeleri, müşteri yorumları). Bu alanlarda
   içerik ekranın sağ kenarında kesiliyor ve taşma gibi görünüyordu.

   Çözüm: kaydırıcının sağ kenarına yapışan yuvarlak bir ok düğmesi. Düğme,
   position:sticky ile kaydırma alanının GÖRÜNEN sağ kenarına sabitlenir —
   bu sayede hiçbir view'da sarmalayıcı eklemeye gerek kalmaz.

   Sınıflar JS tarafından eklenir (wwwroot/js/kaydirma-ipucu.js):
     .kip-host      -> kaydırıcının kendisi (sağda ok için yer ayrılır)
     .kip           -> ok düğmesi (kaydırıcının son çocuğu)
     .kip--gizli    -> sona gelindiğinde ok gizlenir

   BOYUT: --kip-boy değişkeni daire çapını belirler. Her alanın satır yüksekliği
   farklı olduğu için alan başına ayarlanır; değer o satırın içerik yüksekliğini
   AŞMAMALIDIR, yoksa satır uzar veya daire overflow ile kırpılır.
   ========================================================================== */

.kip-host {
    /* --kip-boy   : daire çapı
       --kip-rezerv: sağda ayrılan yer. Varsayılanda daire içeriğin üstüne HİÇ
                     binmez. Küçültülürse daire içeriğin üzerine taşar. */
    --kip-boy: 40px;
    --kip-rezerv: calc(var(--kip-boy) + 10px);
    padding-right: var(--kip-rezerv);
}

/* Alan bazlı çaplar — ölçülen satır içerik yükseklikleri:
   hikayeler 64px · pop-tabs 41px · pop-panel 54px · sss__tabs 48px */
.hikayeler__scroll.kip-host { --kip-boy: 52px; }
.pop-panel.kip-host         { --kip-boy: 44px; }
.sss__tabs.kip-host         { --kip-boy: 40px; }
.pop-tabs.kip-host          { --kip-boy: 34px; }

/* Yorum kartları "flex: 0 0 82%" ile ölçülendiği için sağda yer ayırmak kartları
   daraltıp metni fazladan sardırıyordu (238px -> 261px satır yüksekliği).
   Burada rezerv en aza indirilir; daire kartın sağ kenarına biner — kart
   karuselinde beklenen ve kabul gören bir görünüm. */
.yorumlar__track.kip-host { --kip-boy: 52px; --kip-rezerv: 14px; }

.kip {
    position: sticky;
    right: 0;
    flex: 0 0 auto;
    align-self: center;
    margin-left: auto;      /* son öğeden bağımsız, hep sağ kenarda */
    /* Genişlik 0: düğme akışta yer kaplamaz, görünen daire ::before ile çizilir.
       Yükseklik satır içeriğini aşmadığı için satır yüksekliği değişmez. */
    width: 0;
    height: var(--kip-boy);
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    z-index: 2;
    opacity: 1;
    transition: opacity .25s ease;
}

/* --- Daire ---
   Sticky öğenin "right: 0" hizası, kaydırıcının PADDING'i kadar içeride kalır.
   Daire negatif offset ile sağa taşınır; hedef: dairenin sağ kenarı alanın sağ
   kenarından 10px içeride dursun. Offset = 10px - ayrılan rezerv. */
.kip::before {
    content: "";
    position: absolute;
    right: calc(10px - var(--kip-rezerv));
    top: 50%;
    transform: translateY(-50%);
    width: var(--kip-boy);
    height: var(--kip-boy);
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--line, #e7eaed);
    box-shadow: 0 2px 10px rgba(20, 23, 26, .10);
    transition: background .2s ease, border-color .2s ease;
}

/* --- Chevron (ince ok ucu) ---
   Dairenin tam ortasına hizalanır: dairenin offset'i + yarıçap - yarı genişlik. */
.kip::after {
    content: "";
    position: absolute;
    right: calc(10px - var(--kip-rezerv) + var(--kip-boy) * .5 - 4.5px);
    top: 50%;
    width: 9px;
    height: 9px;
    border-right: 1.8px solid var(--ink, #14171a);
    border-bottom: 1.8px solid var(--ink, #14171a);
    transform: translateY(-50%) rotate(-45deg);
    transition: border-color .2s ease;
}

.kip:hover::before,
.kip:focus-visible::before { background: var(--ink, #14171a); border-color: var(--ink, #14171a); }
.kip:hover::after,
.kip:focus-visible::after { border-right-color: #fff; border-bottom-color: #fff; }

/* Sona gelindiğinde: ok kaybolur (tıklama da almaz) */
.kip--gizli { opacity: 0; pointer-events: none; }

/* Hafif nabız — ilk bakışta gözden kaçmasın. Daire kaydırılır, ok ucu değil;
   böylece chevron'un rotate dönüşümü bozulmaz. */
@keyframes kipNabiz {
    0%, 100% { transform: translateY(-50%) translateX(0); }
    50%      { transform: translateY(-50%) translateX(3px); }
}
.kip:not(.kip--gizli)::before { animation: kipNabiz 1.8s ease-in-out 3; }

@media (prefers-reduced-motion: reduce) {
    .kip::before { animation: none; }
    .kip { transition: none; }
}

/* ---------------------------------------------------------------------------
   MASAÜSTÜ: ipucu gösterilmez.
   Bu alanlar geniş ekranda ya taşmıyor ya da kendi oku var (.hikayeler__next).
   Ayrım JS'te değil BURADA yapılır — düğme her zaman DOM'da kalır, yalnızca
   gizlenir; böylece ekran genişliği değişince ek bir JS olayına ihtiyaç olmaz.
   --------------------------------------------------------------------------- */
@media (min-width: 992px) {
    .kip { display: none; }
    .kip-host { padding-right: 0; }
}