/* ==========================================================================
   Pusula Koçluk — responsive.css
   Kırılma noktaları (RESPONSIVE_SPEC.md):
     >= 1200px  geniş desktop
     992–1199   desktop / tablet landscape
     1024–      merkezî çapraz pusula kompozisyonu
     768–1023   tablet: pusula üstte, yön kartları 2×2
     <= 767     mobil: dekoratif pusula + tek-açık accordion
   Test edilen genişlikler: 1440 / 1280 / 1024 / 390 / 360 / 320
   ========================================================================== */

/* ==========================================================================
   Desktop dar / tablet — 768–1199 px
   Hero iki sütun kalmalı. Varsayılan flex-basis değerleri (448 + 460) bu
   genişlikte sarmaya başlayıp hero'yu ~1200 px'e çıkarıyordu; tabana inen
   basis ve küçülen pusula ile metin–pusula dengesi korunur.
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1199px) {
  .pk-hero__copy {
    flex: 1 1 360px;
    min-width: min(100%, 300px);
  }

  .pk-hero__visual {
    flex: 1 1 320px;
    min-width: 0;
  }

  .pk-hero__compass {
    max-width: min(420px, 42vw);
  }
}

/* ==========================================================================
   Tablet — 768–1023 px
   Merkezî pusula üstte, dört yön kartı 2×2 grid; bağlantı dirsekleri sadeleşir.
   ========================================================================== */

@media (max-width: 1023px) {
  .pk-cross {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto auto;
    gap: clamp(18px, 2.6vw, 28px);
  }

  .pk-cross__compass {
    grid-column: 1 / -1;
    grid-row: 1;
    width: clamp(240px, 38vw, 360px);
    margin-bottom: clamp(8px, 2vh, 20px);
  }

  .pk-dir[data-dir-card="0"] {
    grid-column: 1;
    grid-row: 2;
  }
  .pk-dir[data-dir-card="1"] {
    grid-column: 2;
    grid-row: 2;
  }
  .pk-dir[data-dir-card="2"] {
    grid-column: 1;
    grid-row: 3;
  }
  .pk-dir[data-dir-card="3"] {
    grid-column: 2;
    grid-row: 3;
  }

  /* Çapraz düzen kalkınca dirsekler anlamını yitirir */
  .pk-dir__conn {
    display: none;
  }

  .pk-dir,
  .pk-dir--right,
  .pk-dir--left {
    text-align: left;
    align-self: stretch;
  }

  /* Tablette dört kart da "ikon → başlık" düzenine hizalanır.
     01/04 kartlarında DOM sırası başlık→ikon olduğu için ters çevrilir. */
  .pk-dir--right .pk-dir__head {
    flex-direction: row-reverse;
    justify-content: flex-end;
  }

  .pk-dir--left .pk-dir__head {
    flex-direction: row;
    justify-content: flex-start;
  }

  .pk-dir--right .pk-dir__label,
  .pk-dir--left .pk-dir__label {
    align-items: flex-start;
  }

  .pk-dir--right .pk-dir__text {
    margin-left: 0;
  }

  .pk-dir__text {
    max-width: none;
  }
}

/* ==========================================================================
   Mobil — <= 767 px
   ========================================================================== */

@media (max-width: 767px) {
  :root {
    --pk-gutter: clamp(16px, 4.5vw, 20px);
    --pk-header-h: 66px;
    --pk-section-y: clamp(64px, 9vh, 88px);
    --pk-section-y-cta: clamp(72px, 10vh, 96px);
    /* Hero toplam yüksekliği 1000 px sınırının altında rahat kalsın
       (RESPONSIVE_SPEC: "Hero toplam yüksekliği gereksiz şekilde
       1000 px'yi aşmamalı"). Üst boşluk 66 px'lik sabit header'ı aşar. */
    --pk-hero-pt: clamp(96px, 12vh, 120px);
    --pk-hero-pb: clamp(56px, 7vh, 80px);
  }

  /* --- Header: üç aksiyon icon-only, her biri 44×44 -------------------- */

  .pk-header__inner {
    padding: 11px var(--pk-gutter);
    gap: 12px;
  }

  .pk-logo {
    gap: 10px;
  }

  .pk-logo__mark {
    width: 32px;
    height: 32px;
  }

  .pk-logo__name {
    font-size: clamp(17px, 4.6vw, 21px);
    letter-spacing: 0.16em;
  }

  .pk-logo__sub {
    font-size: 9px;
    letter-spacing: 0.4em;
    margin-right: -0.4em;
  }

  .pk-quick {
    gap: 4px;
    flex-shrink: 0;
  }

  /* Görünür metin gizlenir, erişilebilir ad aria-label ile korunur.
     Hamburger menü eklenmez. */
  .pk-quick__label {
    display: none;
  }

  .pk-quick__link,
  .pk-quick__link--phone {
    width: var(--pk-touch);
    height: var(--pk-touch);
    min-width: var(--pk-touch);
    min-height: var(--pk-touch);
    padding: 0;
    gap: 0;
  }

  /* --- Hero ------------------------------------------------------------ */

  .pk-hero {
    min-height: 0;
  }

  .pk-hero__inner {
    gap: clamp(28px, 6vw, 40px);
  }

  /* Dekoratif atmosfer mobilde metnin okunurluğunu bozmasın */
  .pk-hero__atmos {
    width: 100%;
    opacity: 0.3;
  }

  .pk-hero__scrim {
    width: 100%;
    background: linear-gradient(
      180deg,
      rgba(6, 18, 37, 0.55) 0%,
      rgba(6, 18, 37, 0.25) 55%,
      rgba(6, 18, 37, 0.6) 100%
    );
  }

  .pk-hero__flag {
    margin-bottom: 20px;
  }

  .pk-hero__lead {
    margin-bottom: 30px;
  }

  .pk-hero__compass {
    max-width: min(320px, 72vw);
  }

  .pk-hero__meta {
    margin-top: 26px;
  }

  .pk-hero__scroll {
    bottom: 18px;
  }

  /* --- Sistem: accordion moduna geçiş ---------------------------------- */

  .pk-cross,
  .pk-details {
    display: none;
  }

  .pk-acc-wrap {
    display: block;
  }

  /* --- Dijital platform paneli -------------------------------------------------- */

  .pk-platform__head {
    gap: 18px 24px;
  }

  .pk-platform__badge {
    width: 82px;
    height: 82px;
  }

  .pk-platform__badge b {
    font-size: 26px;
  }

  /* --- Hakkımızda ------------------------------------------------------- */

  .pk-about__inner {
    gap: 34px;
  }

  .pk-about__plate {
    width: min(100%, 320px);
  }

  .pk-values {
    gap: 22px 14px;
  }

  .pk-value {
    flex: 1 1 130px;
    min-width: 120px;
  }

  /* --- Footer ----------------------------------------------------------- */

  .pk-footer__cols {
    gap: 36px;
  }

  .pk-footer__brand,
  .pk-footer__col,
  .pk-footer__col--service {
    flex: 1 1 100%;
    min-width: 0;
  }

  .pk-footer__watermark {
    width: 240px;
    right: -60px;
    bottom: -60px;
  }

  .pk-footer__bar {
    justify-content: flex-start;
  }

  /* --- Sabit iletişim butonları: mobilde metinli (pill) --------------- */

  .pk-fab {
    gap: 10px;
  }

  /* Mobilde ne olduğu ikondan anlaşılmasın diye etiket kalıcı görünür.
     Buton içeriğe göre genişler, yükseklik 52 px'te sabit kalır. */
  .pk-fab__btn {
    width: auto;
    min-width: 52px;
    height: 52px;
    padding: 0 18px;
    font-size: 14.5px;
  }

  .pk-fab__text {
    max-width: none;
    opacity: 1;
    margin-left: 9px;
    overflow: visible;
  }

  /* Footer alt çubuğunun butonların altında kalmaması için pay */
  .pk-footer__bar {
    padding-bottom: calc(24px + 62px + env(safe-area-inset-bottom, 0px));
  }

  /* Dokunmatikte footer bağlantıları da 44 px hedefe ulaşsın.
     Desktop'ta tasarım yoğunluğu korunur (fare için 24 px yeterli). */
  .pk-footer__links a,
  .pk-footer__phone {
    min-height: var(--pk-touch);
  }

  .pk-footer__phone {
    display: inline-flex;
    align-items: center;
  }
}

/* ==========================================================================
   Küçük mobil — <= 479 px
   CTA'lar tam genişlik; 360 px ve 320 px'de taşma olmaz.
   ========================================================================== */

@media (max-width: 479px) {
  .pk-hero__actions,
  .pk-cta__actions {
    gap: 12px;
  }

  .pk-hero__actions .pk-btn,
  .pk-cta__actions .pk-btn,
  .pk-footer__banner > .pk-btn {
    flex: 1 1 100%;
    width: 100%;
  }

  .pk-cta__card {
    padding: 20px 18px;
  }

  .pk-acc__btn {
    gap: 10px;
    padding: 14px 14px;
  }

  .pk-acc__panel .pk-facts {
    padding: 2px 16px 20px 40px;
  }

  .pk-footer__phone {
    font-size: 22px;
  }
}

/* ==========================================================================
   Çok küçük mobil — <= 360 px
   Header üç aksiyon + logo tek satırda taşmadan kalmalı.
   ========================================================================== */

@media (max-width: 360px) {
  /* Etiketli sabit butonlar dar ekranda hafifçe sıkışır; dokunma yüksekliği
     (48 px) ve okunabilirlik korunur. */
  .pk-fab__btn {
    height: 48px;
    padding: 0 14px;
    font-size: 13.5px;
  }

  .pk-fab__text {
    margin-left: 8px;
  }

  .pk-quick {
    gap: 2px;
  }

  .pk-logo {
    gap: 8px;
  }

  .pk-logo__mark {
    width: 30px;
    height: 30px;
  }

  .pk-acc__num {
    min-width: 22px;
    font-size: 15px;
  }
}

/* ==========================================================================
   Yatay dar ekran — çok kısa viewport'ta hero kilitlenmesin
   ========================================================================== */

@media (max-height: 620px) and (min-width: 768px) {
  .pk-hero {
    min-height: 0;
  }

  .pk-hero__scroll {
    display: none;
  }
}

/* ==========================================================================
   Baskı — temel okunabilirlik
   ========================================================================== */

@media print {
  .pk-header,
  .pk-hero__scroll,
  .pk-grain-host::after,
  .pk-hero__atmos,
  .pk-hero__scrim,
  .pk-cta__watermark,
  .pk-footer__watermark,
  .pk-skip,
  .pk-fab {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  /* Baskıda tüm adım içerikleri görünür olsun */
  .pk-acc__panel[hidden] {
    display: block !important;
  }

  .pk-js .pk-acc__panel {
    grid-template-rows: 1fr !important;
    opacity: 1 !important;
  }
}