/* =========================================================
   Beyin Spektrumu — mobil/tablet uyum katmanı (v3)
   Masaüstü tasarımına dokunmaz; tüm kurallar media query içinde.
   NOT: Sayfalar runtime'da style özniteliklerini boşluklu yazar
   ("padding: 20px 56px"). Eşleşmeler özellik adları ve iki nokta
   içermeyen değer parçalarıyla yapılır.
   ========================================================= */

html, body{
  -webkit-text-size-adjust:100%;
}
a, button{ touch-action:manipulation; }

/* Hamburger yalnızca mobilde görünür (masaüstünde inline display:none) */

/* ---------------- TABLET (<=1080px) ---------------- */
@media (max-width:1080px){
  html, body{ overflow-x:hidden; }

  header{
    padding-left:28px !important;
    padding-right:28px !important;
    gap:20px !important;
  }
  header nav{
    flex-wrap:wrap !important;
    justify-content:flex-end !important;
    gap:12px 18px !important;
  }

  section[style*="grid-template-columns"]{
    grid-template-columns:1fr !important;
    gap:44px !important;
  }

  section{
    padding-left:40px !important;
    padding-right:40px !important;
  }

  h1{ font-size:clamp(42px,6.5vw,64px) !important; }
}

/* ---------------- MOBİL (<=768px) ---------------- */
@media (max-width:768px){
  html, body{ overflow-x:hidden; }
  img{ max-width:100%; }
  p, h1, h2, h3, blockquote{ overflow-wrap:anywhere; }

  /* --- Üst duyuru şeridi --- */
  body a[style*="justify-content: center"][style*="gap: 12px"],
  body a[style*="justify-content:center"][style*="gap:12px"]{
    flex-wrap:wrap !important;
    text-align:center !important;
    padding:10px 14px !important;
    line-height:1.45 !important;
  }

  /* --- Header: hamburger menü --- */
  header{
    flex-wrap:wrap !important;
    justify-content:space-between !important;
    align-items:center !important;
    padding:12px 16px !important;
    gap:10px !important;
  }
  header label[for="bsNavToggle"]{
    display:flex !important;
  }
  header nav{
    display:none !important;
  }
  header #bsNavToggle:checked ~ nav{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    width:100% !important;
    gap:6px 10px !important;
    margin-top:8px !important;
    padding-top:12px !important;
    border-top:1px solid rgba(255,255,255,.08) !important;
  }
  header nav a{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:44px !important;
    text-align:center !important;
    white-space:normal !important;
    line-height:1.2 !important;
    padding:8px 10px !important;
    border-bottom:0 !important;
    border-radius:12px !important;
  }
  header #bsNavToggle:checked + label{
    border-color:rgba(238,241,250,.6) !important;
    background:rgba(238,241,250,.08) !important;
  }

  /* --- Tüm grid'ler tek kolon --- */
  [style*="grid-template-columns"]{
    grid-template-columns:1fr !important;
  }
  section[style*="grid-template-columns"]{ gap:36px !important; }

  /* Küçük rozet/istatistik gridleri dahil hepsi tek kolon */
  div[style*="repeat(5"],
  div[style*="repeat(4"]{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }

  /* Büyük harf başlık şeritleri satıra bölününce sıkışmasın */
  div[style*="0.28em"], span[style*="0.28em"], div[style*=".28em"], span[style*=".28em"],
  div[style*="0.24em"], span[style*="0.24em"], div[style*=".24em"], span[style*=".24em"],
  div[style*="0.2em"], span[style*="0.2em"], div[style*=".2em"], span[style*=".2em"],
  div[style*="0.18em"], span[style*="0.18em"], div[style*=".18em"], span[style*=".18em"],
  div[style*="0.16em"], span[style*="0.16em"], div[style*=".16em"], span[style*=".16em"],
  div[style*="0.14em"], span[style*="0.14em"], div[style*=".14em"], span[style*=".14em"],
  div[style*="0.12em"], span[style*="0.12em"], div[style*=".12em"], span[style*=".12em"]{
    line-height:1.6 !important;
  }

  /* Hakkımda zaman çizelgesi: yıl · nokta · metin */
  div[style*="140px 40px"]{
    grid-template-columns:56px 22px 1fr !important;
    gap:12px !important;
  }

  /* --- Section dolguları --- */
  section{
    padding-left:20px !important;
    padding-right:20px !important;
  }
  section[style*="border-radius"]{
    margin-left:12px !important;
    margin-right:12px !important;
    border-radius:20px !important;
    padding-left:20px !important;
    padding-right:20px !important;
  }
  section div[style*="0 32px"],
  section div[style*="0px 32px"]{
    padding-left:0 !important;
    padding-right:0 !important;
  }

  /* --- Tipografi --- */
  h1{
    font-size:clamp(31px,9.6vw,42px) !important;
    line-height:1.12 !important;
    letter-spacing:-.02em !important;
  }
  h2{
    font-size:clamp(26px,8vw,34px) !important;
    line-height:1.18 !important;
  }
  h3[style*="44px"]{
    font-size:clamp(27px,8.4vw,34px) !important;
    line-height:1.15 !important;
  }

  /* --- Esnek satırlar gerektiğinde alt satıra insin --- */
  div[style*="display: flex"],
  div[style*="display:flex"],
  span[style*="display: flex"],
  span[style*="display:flex"]{
    flex-wrap:wrap;
  }
  /* Satıra bölünen yatay diziler arasına dikey boşluk */
  div[style*="display: flex"]:not([style*="flex-direction: column"]):not([style*="flex-direction:column"]),
  div[style*="display:flex"]:not([style*="flex-direction: column"]):not([style*="flex-direction:column"]){
    row-gap:14px;
  }

  /* Görsel kolonu metnin altına insin (kitap panelleri, prizma sahneleri) */
  [style*="grid-template-columns"] > div:first-child[style*="justify-content: center"][style*="position: relative"],
  [style*="grid-template-columns"] > div:first-child[style*="justify-content:center"][style*="position:relative"],
  section[style*="380px 1fr"] > div:first-child[style*="height: 280px"],
  section[style*="380px 1fr"] > div:first-child[style*="height:280px"]{
    order:2;
  }

  /* Mobil-özel görseller */
  [data-mobile-only]{ display:flex !important; }
  [data-mobile-hide]{ display:none !important; }

  /* Metin + buton satırları (ZYY paneli altı vb.) alt alta ve aralıklı */
  div[style*="justify-content: space-between"][style*="margin-top: 44px"],
  div[style*="justify-content:space-between"][style*="margin-top:44px"]{
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:20px !important;
  }

  /* CTA buton grupları */
  div[style*="gap: 16px"][style*="justify-content: center"] a,
  div[style*="gap:16px"][style*="justify-content:center"] a{
    flex:1 1 230px !important;
    max-width:360px !important;
    text-align:center !important;
  }
  div[style*="gap: 18px"][style*="margin-top: 34px"] a,
  div[style*="gap:18px"][style*="margin-top:34px"] a{
    text-align:center !important;
  }

  /* --- Görseller --- */
  img[style*="120%"]{
    width:100% !important;
    height:100% !important;
  }
  img[style*="width: 360px"],
  img[style*="width:360px"]{
    width:min(72vw,320px) !important;
  }

  /* Sabit yükseklikli sahneler */
  div[style*="height: 480px"], div[style*="height:480px"]{ height:340px !important; }
  div[style*="height: 460px"], div[style*="height:460px"]{ height:380px !important; }

  /* =====================================================
     ANA SAYFA: PRİZMA SAHNESİ — mobil için yeniden dizilir
     (kapsayıcı: height:300px)
     ===================================================== */
  div[style*="height: 300px"], div[style*="height:300px"]{
    height:200px !important;
    margin-top:40px !important;
  }
  /* Işık huzmesi */
  div[style*="height: 300px"] > div[style*="height: 5px"],
  div[style*="height:300px"] > div[style*="height:5px"]{
    width:28% !important;
    top:98px !important;
  }
  /* Prizma üçgeni */
  div[style*="height: 300px"] > div[style*="clip-path"],
  div[style*="height:300px"] > div[style*="clip-path"]{
    left:28% !important;
    width:92px !important;
    height:92px !important;
    top:54px !important;
  }
  /* Renk ışınları (3.–7. çocuklar) */
  div[style*="height: 300px"] > div[style*="transform-origin"],
  div[style*="height:300px"] > div[style*="transform-origin"]{
    left:calc(28% + 78px) !important;
    width:42vw !important;
    height:12px !important;
  }
  div[style*="height: 300px"] > div:nth-child(3){ top:90px !important; }
  div[style*="height: 300px"] > div:nth-child(4){ top:94px !important; }
  div[style*="height: 300px"] > div:nth-child(5){ top:98px !important; }
  div[style*="height: 300px"] > div:nth-child(6){ top:102px !important; }
  div[style*="height: 300px"] > div:nth-child(7){ top:106px !important; }
  /* Etiketler */
  div[style*="height: 300px"] > div[style*="left: 6%"],
  div[style*="height:300px"] > div[style*="left:6%"]{
    top:70px !important;
    font-size:10.5px !important;
    max-width:96px !important;
  }
  div[style*="height: 300px"] > div[style*="right: 2%"],
  div[style*="height:300px"] > div[style*="right:2%"]{
    top:2px !important;
    font-size:11px !important;
    line-height:1.9 !important;
  }

  /* =====================================================
     ZİNCİR DEVRESİ (index + Sistemler, kapsayıcı height:240px)
     Mobilde dikey zaman çizgisine dönüşür
     ===================================================== */
  div[style*="position: relative"][style*="height: 240px"],
  div[style*="position:relative"][style*="height:240px"]{
    height:auto !important;
    min-width:0 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    padding:4px 0 4px 2px !important;
  }
  div[style*="position: relative"][style*="height: 240px"]::before,
  div[style*="position:relative"][style*="height:240px"]::before{
    content:"";
    position:absolute;
    left:29px;
    top:24px;
    bottom:24px;
    width:2px;
    background:linear-gradient(180deg,#FF3B30,#FF9500,#0A84FF,#34C759,#AF52DE);
    opacity:.45;
  }
  div[style*="position: relative"][style*="height: 240px"] > div,
  div[style*="position:relative"][style*="height:240px"] > div{
    position:static !important;
    width:auto !important;
    max-width:none !important;
    text-align:left !important;
  }
  /* Bağlantı çizgileri gizlenir */
  div[style*="position: relative"][style*="height: 240px"] > div[style*="height: 2px"],
  div[style*="position: relative"][style*="height: 240px"] > div[style*="width: 2px"],
  div[style*="position:relative"][style*="height:240px"] > div[style*="height:2px"],
  div[style*="position:relative"][style*="height:240px"] > div[style*="width:2px"]{
    display:none !important;
  }
  /* Halkalar */
  div[style*="position: relative"][style*="height: 240px"] > div[style*="border-radius: 50%"],
  div[style*="position:relative"][style*="height:240px"] > div[style*="border-radius:50%"]{
    width:58px !important;
    height:58px !important;
    flex:none !important;
    margin:26px 0 0 0 !important;
  }
  /* Genel metinler (ör. sağdaki not) */
  div[style*="position: relative"][style*="height: 240px"] > div:not([style*="border-radius"]),
  div[style*="position:relative"][style*="height:240px"] > div:not([style*="border-radius"]){
    margin:20px 0 0 0 !important;
    font-size:13.5px !important;
    line-height:1.5 !important;
  }
  /* Halkanın hemen yanındaki etiket */
  div[style*="position: relative"][style*="height: 240px"] > div[style*="border-radius: 50%"] + div,
  div[style*="position:relative"][style*="height:240px"] > div[style*="border-radius:50%"] + div{
    margin:-46px 0 0 78px !important;
    font-size:13.5px !important;
    line-height:1.45 !important;
  }
  /* Sağdaki açıklama notu: halkalardan ayrı dursun */
  div[style*="position: relative"][style*="height: 240px"] > div[style*="max-width: 180px"],
  div[style*="position:relative"][style*="height:240px"] > div[style*="max-width:180px"]{
    margin:56px 0 0 0 !important;
    padding-top:16px !important;
    border-top:1px solid rgba(255,255,255,.08) !important;
    text-align:left !important;
    font-size:13px !important;
  }

  /* =====================================================
     BEŞ AYNA KARTLARI (index 250px, Sistemler 230px)
     Mobilde alt alta, tam genişlik
     ===================================================== */
  div:has(> div[style*="border-radius: 14px"][style*="height: 250px"]),
  div:has(> div[style*="border-radius: 14px"][style*="height: 230px"]),
  div:has(> div[style*="border-radius:14px"][style*="height:250px"]),
  div:has(> div[style*="border-radius:14px"][style*="height:230px"]){
    flex-direction:column !important;
    gap:14px !important;
  }
  div[style*="border-radius: 14px"][style*="height: 250px"],
  div[style*="border-radius: 14px"][style*="height: 230px"],
  div[style*="border-radius:14px"][style*="height:250px"],
  div[style*="border-radius:14px"][style*="height:230px"]{
    flex:0 0 150px !important;
    height:150px !important;
    margin-top:0 !important;
    width:100% !important;
  }

  /* Prizma içeren dekoratif sahneler taşmasın (Testler, kitap sayfaları) */
  div[style*="position: relative"]:has(> div[style*="clip-path"]),
  div[style*="position:relative"]:has(> div[style*="clip-path"]){
    overflow:hidden !important;
  }

  /* --- İletişim formu --- */
  input, select, textarea, button{ box-sizing:border-box; max-width:100%; }
  form div[style*="36px 44px"]{
    padding:26px 18px !important;
  }
  form input[type="text"], form input[type="email"], form select, form textarea{
    font-size:16px !important; /* iOS otomatik zoom'u engeller */
    width:100% !important;
  }
  form button[type="submit"]{
    width:100% !important;
    text-align:center !important;
  }
  /* Form alt satırı (not + gönder butonu) alt alta, aralıklı */
  form div[style*="justify-content: space-between"],
  form div[style*="justify-content:space-between"]{
    flex-direction:column !important;
    align-items:stretch !important;
    gap:16px !important;
    margin-top:14px !important;
  }

  /* Sertifikasyon kart rozetleri taşmasın */
  div[style*="top: -13px"], div[style*="top:-13px"]{
    white-space:normal !important;
    max-width:calc(100% - 28px);
    text-align:center;
    line-height:1.3 !important;
  }

  /* --- Footer --- */
  footer{
    padding:52px 22px 32px !important;
  }
  footer > div:first-child{
    grid-template-columns:1fr 1fr !important;
    gap:36px 24px !important;
  }
  footer > div:first-child > div:first-child{
    grid-column:1 / -1;
  }
  footer > div:last-child{
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:12px !important;
  }

  /* WhatsApp butonu */
  a[aria-label="WhatsApp ile yaz"]{
    right:16px !important;
    bottom:16px !important;
    width:52px !important;
    height:52px !important;
  }
}

/* ---------------- DAR TELEFON (<=400px) ---------------- */
@media (max-width:400px){
  header > a span{ font-size:14px !important; }
  header nav a{ font-size:12px !important; }
  h1{ font-size:clamp(28px,9.8vw,34px) !important; }
  section[style*="border-radius"]{
    margin-left:8px !important;
    margin-right:8px !important;
    padding-left:16px !important;
    padding-right:16px !important;
  }
  section{
    padding-left:16px !important;
    padding-right:16px !important;
  }
}