/* ==========================================================================
   Dernify — paylaşılan responsive katman
   --------------------------------------------------------------------------
   Sayfa içeriği inline style ile yazıldığı için (dc-runtime), buradaki
   kurallar inline style'ı ezmek zorunda: bu yüzden !important kullanılıyor.
   Masaüstü görünüm inline style'lardan gelir; bu dosya yalnızca daralan
   ekranlarda devreye girer.
   ========================================================================== */

html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
img { max-width: 100%; }

/* Mobil menü butonu masaüstünde gizli */
.dn-burger { display: none !important; }

/* --------------------------------------------------------------------------
   Kayan logo şeridi (referanslar)
   Liste iki kez basılır; şerit -%50 kaydığında ikinci kopya birincinin yerine
   oturur, böylece döngü kesintisiz görünür. Aralar `gap` ile değil item
   padding'i ile verilmeli — gap kullanılırsa -%50 tam denk gelmez ve zıplar.
   -------------------------------------------------------------------------- */
.dn-marquee {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.dn-marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: dn-marquee-scroll 40s linear infinite;
}
.dn-marquee:hover .dn-marquee-track { animation-play-state: paused; }
@keyframes dn-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.dn-logo-item { flex: 0 0 auto; padding: 0 30px; }
.dn-logo-item img {
  display: block;
  height: 44px;
  width: auto;
  filter: grayscale(1);
  opacity: 0.72;
  transition: filter 0.25s ease, opacity 0.25s ease;
}
.dn-logo-item img:hover { filter: none; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .dn-marquee-track { animation: none; }
}

/* --------------------------------------------------------------------------
   <= 1024px — tablet: iç boşlukları ve başlıkları küçült
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .dn-hero-grid { gap: 36px !important; padding-top: 64px !important; padding-bottom: 72px !important; }
  .dn-hero-h1 { font-size: 44px !important; }
  .dn-section { padding-top: 72px !important; padding-bottom: 72px !important; }
  .dn-h2 { font-size: 32px !important; }
  .dn-contact-grid { gap: 40px !important; }
}

/* --------------------------------------------------------------------------
   <= 900px — tek kolona geç, menüyü hamburger'a çevir
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* Nav */
  .dn-nav-links { display: none !important; }
  .dn-burger { display: inline-flex !important; }

  /* Hero: metin üstte, telefon altta */
  .dn-hero-grid { grid-template-columns: 1fr !important; text-align: center !important; }
  .dn-hero-copy { align-items: center !important; }
  .dn-hero-copy p { max-width: none !important; }
  .dn-hero-actions { justify-content: center !important; }
  .dn-hero-h1 { font-size: 38px !important; }
  .dn-phone { width: 280px !important; }

  /* Grid'ler */
  .dn-grid-2,
  .dn-grid-3 { grid-template-columns: 1fr !important; }

  /* İstatistikler tek sütuna düşmesin, 2x2 olsun */
  .dn-grid-4 { grid-template-columns: repeat(2, 1fr) !important; row-gap: 32px !important; }

  /* İletişim */
  .dn-contact-grid { grid-template-columns: 1fr !important; }

  /* Fiyatlandırma: popüler kartın büyütmesi mobilde taşma yapmasın */
  .dn-plan { padding: 30px 24px !important; }

  /* Referans filtreleri: alt alta sarmak yerine tek satır, yatay kaydırmalı */
  .dn-filters-wrap { justify-content: flex-start !important; margin-left: -18px !important; margin-right: -18px !important; padding: 0 18px !important; }
  .dn-filters {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto;
    max-width: 100%;
    scrollbar-width: none;
  }
  .dn-filters::-webkit-scrollbar { display: none; }
  .dn-filters button { white-space: nowrap; flex-shrink: 0; }
}

/* --------------------------------------------------------------------------
   <= 600px — telefon
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
  .dn-hero-grid { padding: 52px 18px 60px !important; }
  .dn-hero-h1 { font-size: 31px !important; }
  .dn-hero-copy p { font-size: 16.5px !important; }
  .dn-hero-actions a { width: 100% !important; justify-content: center !important; }

  .dn-section { padding: 56px 18px !important; }
  .dn-h2 { font-size: 26px !important; }
  .dn-section-lead { font-size: 15.5px !important; }

  .dn-card { padding: 24px !important; }
  .dn-phone { width: 240px !important; }

  /* Form: iki kolonlu satırlar tek kolona */
  .dn-form-row { grid-template-columns: 1fr !important; }
  .dn-form-card { padding: 24px !important; }

  /* Footer */
  .dn-footer-cols { gap: 32px !important; }
  .dn-footer-bottom { flex-direction: column !important; align-items: flex-start !important; }

  /* Logo şeridi */
  .dn-logo-item { padding: 0 20px !important; }
  .dn-logo-item img { height: 34px !important; }

  /* SSS */
  .dn-faq-q { font-size: 15px !important; padding: 16px 18px !important; }
  .dn-faq-a { padding: 0 18px 18px !important; }

  /* Sayfa başlığı (SSS / Referanslar) */
  .dn-page-title { font-size: 30px !important; }
}

/* --------------------------------------------------------------------------
   <= 380px — küçük telefon
   -------------------------------------------------------------------------- */
@media (max-width: 380px) {
  .dn-hero-h1 { font-size: 27px !important; }
  .dn-phone { width: 210px !important; }
  .dn-store-badges { flex-direction: column !important; }
  .dn-store-badges a { justify-content: center !important; }
}