/* ============================================================
   SLC Hukuk — Mobil Responsive Düzeltmeleri
   Yalnızca max-width: 900px ve 600px kuralları içerir.
   slc-styles.css ve masaüstü görünümüne DOKUNMAZ.
   ============================================================ */

/* ============================================================
   900px — Tablet / Küçük Ekran
   ============================================================ */
@media (max-width: 900px) {

  /* --- Yatay taşma engeli --- */
  body, .slc { overflow-x: hidden; }
  .page { overflow-x: hidden; }

  /* Fixed-width container'ı fluid yap */
  .slc .container {
    width: 100%;
    max-width: 100%;
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
  }

  /* ------------------------------------------------
     ANA SAYFA HERO (hero2) — absolute öğeler düzeltmesi
     ------------------------------------------------ */

  /* Hero mobilde de tam ekran.
     Metin ve duyuru şeridi akışta olduğu için yükseklik `height` ile değil
     `min-height` ile verilir: içerik sığmazsa hero büyür, kesilmez.
     `svh`: mobil tarayıcılarda adres çubuğu açıkken 100vh ekrandan taşıyor ve
     duyuru şeridi kıvrımın altında kalıyordu; svh görünen alanı ölçer.
     Destek yoksa vh yedeği devrede kalır. */
  .hero2 {
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }

  /* hero2-copy: absolute konumdan normal akışa al */
  .hero2-copy {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    max-width: 100%;
    /* Üst boşluk sabit başlığın altından başlamak için; hero kısa ekranda
       büyüdüğünde başlık metnin üzerine binmesin diye korunuyor. */
    padding: 96px 24px 40px;
    margin-top: auto;
    z-index: 3;
    /* Tam ekran hero'da metin bloğu görselin ortasına denk geliyor; oradaki
       perde başlığı taşıyacak kadar koyu değil. Perdenin tamamını koyulaştırmak
       gece görsellerinde üst yarıyı tamamen siyaha çeviriyordu — bunun yerine
       yalnızca metnin arkası, üstten şeffaf başlayarak koyulaştırılıyor. */
    background: linear-gradient(180deg,
      rgba(4,22,15,0) 0%,
      rgba(4,22,15,.42) 28%,
      rgba(4,22,15,.72) 100%);
  }

  /* Yükleme animasyonu: mobilde translateY(-50%) override */
  body.loaded .hero2-copy {
    opacity: 1;
    transform: none;
  }

  /* hero2-copy h1 boyutu */
  .hero2-copy h1 {
    font-size: 36px;
    line-height: 1.2;
    margin: 14px 0 16px;
  }

  .hero2-copy .lead {
    font-size: 15px;
    line-height: 1.75;
    max-width: 100%;
  }

  .hero2-copy .cta {
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
  }
  .hero2-copy .cta .btn { width: 100%; }

  /* Tag (Hızlı/Etkin/Güvenilir): akışa al, butonların altında göster */
  .hero2-tag {
    position: relative;
    left: auto;
    bottom: auto;
    transform: none;
    padding: 0 24px 28px;
    z-index: 3;
  }
  body.loaded .hero2-tag { opacity: 1; }
  .hero2-tag .bar { height: 56px; }
  .hero2-tag .words { font-size: 19px; }

  /* Duyurular & Yayınlar şeridi: akışta, tam genişlik (masaüstündeki öğe korunur) */
  .hero2-news {
    position: relative;
    left: auto; right: auto; bottom: auto;
    display: flex; flex-direction: column;
    width: 100%; max-width: 100%; height: auto;
    margin: 0; z-index: 3;
    opacity: 1 !important;
  }
  .hero2-news .news-head {
    width: 100%; flex-direction: row; align-items: center; justify-content: space-between;
    padding: 16px 24px; gap: 12px;
  }
  .hero2-news .news-head h2 { font-size: 17px; }
  .hero2-news .news-body { width: 100%; height: 132px; }
  .hero2-news .news-item { padding: 18px 24px; gap: 14px; }
  .hero2-news .news-item img,
  .hero2-news .news-item img { width: 92px; height: 70px; }
  .hero2-news .news-item h3 { font-size: 14px; line-height: 1.45; }
  body.loaded .hero2-news { opacity: 1; }

  /* Slider noktaları mobilde gizli */
  .hero2-dots { display: none !important; }

  /* Slides'ı hero yüksekliğine uydur */
  .hero2 .slides,
  .hero2 .slide {
    position: absolute;
    inset: 0;
  }

  /* ------------------------------------------------
     İÇ SAYFA HERO'LARI — header çakışması düzeltmesi
     ------------------------------------------------ */

  /* ab2-hero: fixed header altından başlasın */
  .ab2-hero {
    height: auto;
    min-height: 480px;
    padding-top: 80px;
    align-items: flex-end;
  }

  .ab2-hero h1 {
    font-size: 36px;
    line-height: 1.15;
    margin: 16px 0 0;
  }

  .ab2-hero .inner {
    padding: 0 24px 60px;
  }

  .ab2-hero .sub-row {
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
  }

  .ab2-hero .locs {
    gap: 24px;
    flex-wrap: wrap;
  }

  /* page-hero (klasik iç sayfa hero) */
  .page-hero {
    height: auto;
    min-height: 300px;
    padding-top: 80px;
  }

  .page-hero .ph-inner {
    padding: 40px 24px 48px;
  }

  .page-hero h1 {
    font-size: 34px;
    line-height: 1.2;
    margin: 12px 0 12px;
  }

  /* md-hero (avukat detay) */
  .md-hero .wrap {
    grid-template-columns: 1fr;
    padding-left: 0;
    min-height: auto;
  }

  .md-hero .copy {
    padding: 90px 24px 40px;
  }

  .md-hero h1 {
    font-size: 40px;
    line-height: 1.1;
  }

  .md-hero .photo {
    min-height: 360px;
  }

  /* Dikey yığılan düzende geçiş soldan değil üstten olur */
  .md-hero .photo::after {
    background: linear-gradient(180deg, #072017 0%, rgba(7,32,23,0) 24%);
  }

  /* ------------------------------------------------
     GENEL BÖLÜM PADDING'LERİ
     ------------------------------------------------ */
  .ab2 { --pad: 24px; }

  .ab2-manifesto { padding: 72px 24px; }
  .ab2-stats { padding: 60px 24px; }
  .ab2-reach { padding: 72px 24px; }
  .ab2-principles { padding: 72px 24px; }

  .svc-sec { padding: 72px 24px 80px; }
  .bk-sec { padding: 72px 24px 80px; }
  .ct-info { padding: 72px 24px 0; }
  .ct-main { padding: 60px 24px 80px; }
  .md-info { padding: 60px 24px 24px; }
  .md-bio { padding: 30px 24px 72px; }
  .md-posts { padding: 0 24px 80px; }
  .team-sec { padding: 80px 24px 90px; }

  .slc-hero { padding: 100px 24px 72px; }
  .slc-feats { padding: 0 24px 72px; }
  .slc-svcs { padding: 60px 24px; }
  .slc-arts { padding: 60px 24px 72px; }
  .slc-band { padding: 52px 24px; }
  .about-intro { padding: 72px 24px; }
  .vm { padding: 0 24px 72px; }
  .about-values { padding: 72px 24px; }

  .slc-ftr { padding: 56px 24px 0; }
  .slc-top { padding: 9px 24px; }

  /* ------------------------------------------------
     BAŞLIK BOYUTLARI
     ------------------------------------------------ */
  .sec-title { font-size: 30px; }

  .ab2-reach h2 { font-size: 32px; }
  .ab2-principles .head h2 { font-size: 32px; }
  .team-head h2 { font-size: 32px; }
  .svc-head h2 { font-size: 30px; }
  .bk-head h2 { font-size: 30px; }
  .ct-form-head h2 { font-size: 28px; }
  .about-intro h2 { font-size: 30px; }
  .bk-feat h3 { font-size: 26px; }
  .slc-band h2 { font-size: 26px; }
  .slc-hero h1 { font-size: 38px; }
  .ab2-lead-lg { font-size: 24px; }
  .md-bio h2 { font-size: 26px; }
  .md-posts .head h2 { font-size: 26px; }

  /* ------------------------------------------------
     GRİD'LERİ TEK KOLONA İNDİR
     ------------------------------------------------ */

  /* ab2 manifesto grid */
  .ab2-12 {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .ab2-idx { position: static; }
  .ab2-body { max-width: 100%; }
  .ab2-body--cols { grid-template-columns: 1fr; }
  .ab2-body--cols p:last-child { grid-column: 1; max-width: 100%; }
  /* Dar ekranda yatık görsel okunmaz hale gelir: akışa alınır */
  .ab2-body figure.alignright,
  .ab2-body figure.alignleft {
    float: none;
    max-width: 100%;
    margin: 22px auto;
  }
  .ab2-quote { grid-column: 1; }

  /* ab2-stats: 2 kolon */
  .ab2-stats .row {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 0;
  }
  .ab2-stat:nth-child(3) { padding-left: 0; border-left: none; }

  /* ab2-reach */
  .ab2-reach .grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  /* ab2-caps */
  .ab2-caps {
    grid-template-columns: 1fr;
  }

  /* ab2-principles */
  .ab2-prin {
    grid-template-columns: auto 1fr;
    gap: 10px 20px;
  }
  .ab2-prin .pbody { grid-column: 1 / -1; }

  /* team grid: 2 kolon */
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 16px;
  }
  .team-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 44px;
  }
  .team-head .count { text-align: left; }

  /* svc-grid2: 1 kolon */
  .svc-grid2 {
    grid-template-columns: 1fr;
  }
  .svc-grid2 .svc-item:nth-child(3n),
  .svc-grid2 .svc-item:nth-child(2n) {
    border-right: none;
  }

  /* bk-feat: 1 kolon */
  .bk-feat {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .bk-feat .ph { min-height: 260px; }

  /* bk-grid: 2 kolon (600'de 1'e iner) */
  .bk-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 36px 20px;
  }

  /* arts-grid: 2 kolon */
  .arts-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  /* ftr-grid: 2 kolon */
  .ftr-grid {
    grid-template-columns: 1fr 1fr;
    gap: 36px 28px;
  }

  /* ct-cards: 2 kolon */
  .ct-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  .ct-card:nth-child(2) { border-right: none; }
  .ct-card:nth-child(4) { border-right: none; }

  /* ct-grid: 1 kolon */
  .ct-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  /* ct-form row: 1 kolon */
  .ct-form .row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  /* md-contact: 2 kolon */
  .md-contact .wrap {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 24px;
  }
  .md-vcard { justify-self: start; grid-column: 1 / -1; }

  /* md-info */
  .md-info .grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  /* md-bio */
  .md-bio .cols { columns: 1; }

  /* md-posts grid: 2 kolon */
  .md-posts .grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  /* vm-grid: 1 kolon */
  .vm-grid { grid-template-columns: 1fr; }

  /* hero-grid: 1 kolon */
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  /* feats-grid: 1 kolon */
  .feats-grid { grid-template-columns: 1fr; }

  /* svcs-grid: 1 kolon */
  .svcs-grid { grid-template-columns: 1fr; }

  /* about-intro grid */
  .about-intro .grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  /* ------------------------------------------------
     CTA BANDI (slc-band / band-grid)
     ------------------------------------------------ */
  .band-grid {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
  }
  .band-actions {
    align-items: flex-start;
    gap: 16px;
  }

  /* ------------------------------------------------
     BUTONLAR — taşma engeli
     ------------------------------------------------ */
  .slc .btn {
    max-width: 100%;
    white-space: normal;
    text-align: center;
    justify-content: center;
  }

  /* ------------------------------------------------
     FİLTRE ÇUBUKLARI
     ------------------------------------------------ */
  .svc-filter,
  .bk-filter {
    top: 60px; /* header yüksekliğine göre */
  }

  /* ------------------------------------------------
     FOOTER
     ------------------------------------------------ */
  .ftr-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 18px 0 20px;
  }

  /* ------------------------------------------------
     HERO MEDYA (klasik hero)
     ------------------------------------------------ */
  .hero-media img { height: 320px; }
  .v-b .hero-media img { height: 340px; }

  /* hero medya çerçeve ofset düzeltmesi */
  .v-a .hero-media::after { inset: 12px -12px -12px 12px; }
  .v-c .hero-media::after { inset: 14px -14px -14px 14px; }

  /* about-media */
  .about-media img { height: 320px; }
  .about-media::after { inset: 12px -12px -12px 12px; }
  .about-media .badge { right: -12px; bottom: 20px; padding: 18px 22px; }

  /* ------------------------------------------------
     SLC TOP BAR
     ------------------------------------------------ */
  .slc-top {
    font-size: 12px;
  }
  .slc-top .top-phone span:not(.top-phone svg):not(.top-phone strong) {
    display: none;
  }

} /* end @media (max-width: 900px) */


/* ============================================================
   600px — Telefon
   ============================================================ */
@media (max-width: 600px) {

  /* --- Yatay taşma engeli --- */
  body, .slc, .page { overflow-x: hidden; }

  /* ------------------------------------------------
     HERO
     ------------------------------------------------ */
  .hero2-copy {
    padding: 88px 20px 36px;
  }

  .hero2-copy h1 {
    font-size: 30px;
    line-height: 1.22;
  }

  .hero2-copy .lead { font-size: 14.5px; }

  .hero2-copy .cta {
    flex-direction: column;
    align-items: stretch;
  }
  .hero2-copy .cta .btn {
    text-align: center;
    justify-content: center;
  }

  .ab2-hero h1 {
    font-size: 28px;
  }

  .ab2-hero .inner {
    padding: 0 20px 48px;
  }

  .page-hero h1 { font-size: 26px; }
  .page-hero .ph-inner { padding: 36px 20px 40px; }

  .md-hero h1 { font-size: 32px; }
  .md-hero .copy { padding: 80px 20px 32px; }

  /* ------------------------------------------------
     BAŞLIKLAR
     ------------------------------------------------ */
  .sec-title { font-size: 26px; }
  .ab2-reach h2 { font-size: 26px; }
  .ab2-principles .head h2 { font-size: 26px; }
  .team-head h2 { font-size: 26px; }
  .svc-head h2 { font-size: 24px; }
  .bk-head h2 { font-size: 24px; }
  .ct-form-head h2 { font-size: 24px; }
  .about-intro h2 { font-size: 24px; }
  .bk-feat h3 { font-size: 22px; }
  .slc-band h2 { font-size: 22px; }
  .slc-hero h1 { font-size: 30px; }
  .ab2-lead-lg { font-size: 20px; }

  /* ------------------------------------------------
     BÖLÜM PADDING'LERİ
     ------------------------------------------------ */
  .ab2-manifesto { padding: 56px 20px; }
  .ab2-stats { padding: 48px 20px; }
  .ab2-reach { padding: 56px 20px; }
  .ab2-principles { padding: 56px 20px; }

  .svc-sec { padding: 56px 20px 64px; }

  /* On bir çip telefonda dört satıra yayılıp ekranın üçte birini yiyordu.
     Yatay kaydırmalı tek satır hem yer kaplamıyor hem de çipleri daraltıp
     okunmaz hâle getirmiyor. Kaydırma kendi kabında olduğu için sayfa
     gövdesi yana kaymaz; kenar boşluğu bozulmasın diye negatif kenar
     boşluğu kullanılmadı. */
  .svc-filter {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .svc-filter::-webkit-scrollbar { display: none; }
  .svc-chip { flex: 0 0 auto; }
  .bk-sec { padding: 56px 20px 64px; }
  .ct-info { padding: 56px 20px 0; }
  .ct-main { padding: 48px 20px 64px; }
  .md-info { padding: 48px 20px 20px; }
  .md-bio { padding: 24px 20px 56px; }
  .md-posts { padding: 0 20px 64px; }
  .team-sec { padding: 64px 20px 72px; }

  .slc-hero { padding: 90px 20px 60px; }
  .slc-feats { padding: 0 20px 60px; }
  .slc-svcs { padding: 48px 20px; }
  .slc-arts { padding: 48px 20px 60px; }
  .slc-band { padding: 44px 20px; }
  .about-intro { padding: 56px 20px; }
  .vm { padding: 0 20px 56px; }
  .about-values { padding: 56px 20px; }

  .slc-ftr { padding: 48px 20px 0; }
  .slc-top { padding: 9px 20px; }

  /* ------------------------------------------------
     GRİD'LER
     ------------------------------------------------ */

  /* team: 1 kolon */
  .team-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  /* arts-grid: 1 kolon */
  .arts-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* bk-grid: 1 kolon */
  .bk-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  /* ftr-grid: 1 kolon */
  .ftr-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* ct-cards: 1 kolon */
  .ct-cards {
    grid-template-columns: 1fr;
  }
  .ct-card { border-right: none !important; }

  /* md-contact: 1 kolon */
  .md-contact .wrap {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 20px;
  }

  /* md-posts grid: 1 kolon */
  .md-posts .grid {
    grid-template-columns: 1fr;
  }

  /* ab2-stats: 1 kolon */
  .ab2-stats .row {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .ab2-stat {
    padding-left: 0;
    border-left: none;
    padding-bottom: 28px;
    border-bottom: 1px solid rgba(255,255,255,.14);
  }
  .ab2-stat:last-child { border-bottom: none; padding-bottom: 0; }

  /* ------------------------------------------------
     STAT SAYILARI
     ------------------------------------------------ */
  .ab2-stat .n { font-size: 44px; }

  /* ------------------------------------------------
     hero-cta dikey dizilim
     ------------------------------------------------ */
  .hero-cta {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .hero-cta .btn {
    text-align: center;
    justify-content: center;
  }

  /* ------------------------------------------------
     CTA BANDI
     ------------------------------------------------ */
  .slc-band { text-align: left; }
  .band-actions { width: 100%; }
  .band-actions .btn { width: 100%; justify-content: center; }

  /* ------------------------------------------------
     HERO MEDYA
     ------------------------------------------------ */
  .hero-media img { height: 260px; }
  .v-a .hero-media::after,
  .v-b .hero-media::after,
  .v-c .hero-media::after { display: none; }
  .v-c .hero-media::before { display: none; }

  .about-media img { height: 260px; }
  .about-media::after { display: none; }
  .about-media .badge {
    position: static;
    display: inline-flex;
    margin-top: 16px;
    box-shadow: none;
  }

  /* ------------------------------------------------
     FOOTER
     ------------------------------------------------ */
  .ftr-bottom {
    font-size: 11.5px;
  }

} /* end @media (max-width: 600px) */