:root{
      --primary:#2563eb;
      --primary-soft:#dbeafe;
      --accent:#b92d50;
      --accent-soft:#fee2e2;
      --bg:#f4f7ff;
      --card-bg:#ffffff;
      --text:#0f172a;
      --muted:#6b7280;
      --border:#d1d5db;
      --success:#16a34a;
      --warning:#eab308;
    }
    *{margin:0;padding:0;box-sizing:border-box;}
    html{scroll-behavior:smooth;font-size: 18px;overflow-x: hidden;width: 100%;}
    body{
      font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      background:
        radial-gradient(circle at top left, rgba(185,45,80,0.25), transparent 55%),
        radial-gradient(circle at bottom right, rgba(37,99,235,0.25), transparent 55%),
        #192259;
      color:var(--text);
      line-height:1.6;
      overflow-x: hidden;
      width: 100%;
    }
    img {
      max-width: 100%;
    }
    a{text-decoration:none;color:inherit;}

    /* Scroll Progress */
    #scrollProgress{
      position:fixed;top:0;left:0;height:3px;width:0;
      background:linear-gradient(90deg,#2563eb,#3b82f6,#b92d50);
      z-index:60;transition:width 0.15s linear;
    }

    header{
      position:sticky;top:0;z-index:50;
      backdrop-filter:blur(20px);
      -webkit-backdrop-filter:blur(20px);
      background:rgba(25,34,89,0.85);
      border-bottom:1px solid rgba(15,23,42,0.4);
    }
    .nav{
      max-width:1500px;margin:0 auto;padding:0.7rem 1.4rem;
      display:flex;align-items:center;justify-content:space-between;
    }
    .nav-left{display:flex;align-items:center;gap:0.65rem;}
    .logo-pill{
      padding:0.1rem 0.7rem;border-radius:999px;background:#b92d50;color:#fff;
      font-weight:700;font-size:0.9rem;letter-spacing:0.04em;
    }
    .logo-text{font-weight:600;font-size:1rem;color:#fff;}
    .pulse-dot{width:9px;height:9px;border-radius:999px;background:#22c55e;position:relative;}
    .pulse-dot::after{
      content:"";position:absolute;inset:-4px;border-radius:999px;
      border:1px solid rgba(34,197,94,0.7);animation:pulse 1.4s infinite;
    }
    @keyframes pulse{0%{transform:scale(0.9);opacity:1}100%{transform:scale(1.4);opacity:0}}

    .nav-links{display:flex;gap:1rem;font-size:1.2rem;}
    .nav-links a{
      padding:0.3rem 0.7rem;border-radius:999px;color:#e5e7ff;
      transition:background 0.2s,color 0.2s,transform 0.15s;
    }
    .nav-links a:hover{background:rgba(248,250,252,0.08);color:#fff;transform:translateY(-1px);}
    .nav-cta{
      font-size:0.85rem;padding:0.4rem 0.95rem;border-radius:999px;
      background:#b92d50;color:#fff;font-weight:600;border:none;
    }
    main{max-width:1500px;margin:0 auto;padding:1.5rem 1.4rem 3rem;}
    section{margin:3.5rem 0;}

    /* Hero */
 /* Hero */
    .hero{
      display:grid;grid-template-columns:minmax(0,3.2fr) minmax(0,2.3fr);
      gap:2.4rem;align-items:center;
      background:#192259;border-radius:1.5rem;padding:2rem 1.8rem;
      box-shadow:0 24px 60px rgba(0,0,0,0.45);
    }
    .hero-badge-row{
      display:inline-flex;align-items:center;gap:0.4rem;font-size:1rem;
      padding:0.15rem 0.6rem;border-radius:999px;background:rgba(255,255,255,0.12);
      border:1px solid rgba(148,163,184,0.5);margin-bottom:0.8rem;
    }
    .hero-badge-row span{color:#e5e7ff;}
    .hero-title{
      font-size:clamp(2.1rem,4vw,2.9rem);line-height:1.1;font-weight:800;
      margin-bottom:0.7rem;color:#fff;
    }
    .hero-title span{
      background:linear-gradient(120deg,#ffffff,#b92d50);
      -webkit-background-clip:text;color:transparent;
    }
    .hero-subtitle{font-size:1.4rem;color:#cbd5f5;max-width:32rem;margin-bottom:1rem;}
    .hero-actions{display:flex;flex-wrap:wrap;gap:0.7rem;margin-bottom:0.8rem;}
    .btn-primary{
      border-radius:999px;padding:0.7rem 1.4rem;border:none;
      background:linear-gradient(135deg,#b92d50,#ff4b6a);color:white;
      font-size:0.9rem;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:0.4rem;
      box-shadow:0 18px 40px rgba(185,45,80,0.55);
      transition:transform 0.12s ease-out, box-shadow 0.12s ease-out;
    }
    .btn-primary:hover{transform:translateY(-1px);box-shadow:0 22px 50px rgba(185,45,80,0.75);}
    .btn-ghost{
      border-radius:999px;padding:0.6rem 1.2rem;border:1px solid rgba(248,250,252,0.6);
      font-size:0.9rem;color:#e5e7ff;cursor:pointer;background:rgba(15,23,42,0.4);
      transition:background 0.15s,border-color 0.15s,color 0.15s,transform 0.12s;
    }
    .btn-ghost:hover{background:rgba(15,23,42,0.8);border-color:#fff;color:#fff;transform:translateY(-1px);}
    .hero-note{font-size:1rem;color:#cbd5f5;display:flex;align-items:center;gap:0.4rem;}
    .hero-note span{color:#ff4b6a;font-size:1rem;}

    .stats-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0.9rem;margin-top:1.2rem;}
    .stat-card{
      font-size:0.8rem;padding:0.6rem 0.8rem;border-radius:0.9rem;
      background:#202b70;border:1px solid #37429b;color:#e5e7ff;
    }
    .stat-label{color:#cbd5f5;margin-bottom:0.1rem;}
    .stat-value{font-size:0.95rem;font-weight:600;color:#ff4b6a;}
/* ===== KREATİV HERO VİZUALI (GLASSMORPHISM) ===== */
    .hero-visuals {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }

    .glass-panel {
      background: rgba(255, 255, 255, 0.03); 
      backdrop-filter: blur(16px); 
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(255, 255, 255, 0.1); 
      border-radius: 1.5rem;
      padding: 2rem;
      box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2);
      position: relative;
      overflow: hidden;
    }

    .glass-panel::before {
      content: "";
      position: absolute;
      top: -50px; right: -50px;
      width: 150px; height: 150px;
      background: rgba(185, 45, 80, 0.4);
      filter: blur(60px);
      z-index: 0;
    }

    .glass-header {
      display: flex; justify-content: space-between; align-items: center;
      position: relative; z-index: 1;
    }
    .glass-badge {
      background: rgba(255, 255, 255, 0.1); color: #fff;
      padding: 0.3rem 0.8rem; border-radius: 999px;
      font-size: 0.8rem; font-weight: 700;
      border: 1px solid rgba(255, 255, 255, 0.2);
    }
    .glass-subtitle { color: #cbd5f5; font-size: 1.4rem; }

    .heart-line-wrapper { margin: 1.5rem 0; position: relative; z-index: 1; }
    
    .massive-bp {
      display: flex; align-items: baseline; gap: 0.5rem;
      position: relative; z-index: 1;
      background: rgba(255, 255, 255, 0.9); 
      padding: 1rem 2rem; 
      border-radius: 1.2rem;
      box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    }

    .glass-target-logo {
      height: 150px; 
      width: auto;
      object-fit: contain;
      margin-top: 0.1rem;
      position: relative;
      z-index: 2;
      filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.2)); 
    }

    .hbp-alert {
      display: flex; align-items: center; gap: 1rem;
      background: linear-gradient(135deg, rgba(37,99,235,0.15), rgba(15,23,42,0.3));
      border: 1px solid rgba(59,130,246,0.3);
      padding: 1.2rem;
      border-radius: 1rem;
    }
    .hbp-icon { font-size: 2rem; }
    .hbp-text { color: #e2e8f0; font-size: 0.95rem; line-height: 1.5; }
    .hbp-text strong { color: #fff; font-size: 1.05rem; }

    .header-logo {
      height: 38px; 
      width: auto;
      object-fit: contain;
    }
    /* Hero right card */
    .hero-card{
      position:relative;border-radius:1.4rem;padding:1.2rem 1.3rem 1.4rem;
      background:#202b70;border:1px solid #37429b;color:#e5e7ff;
      box-shadow:0 22px 60px rgba(15,23,42,0.9);overflow:hidden;
    }
    .hero-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:0.3rem;position:relative;z-index:1;}
    .hero-card-header span{font-size:0.8rem;color:#cbd5f5;}
    .hero-card-label{font-size:0.75rem;padding:0.15rem 0.6rem;border-radius:999px;background:rgba(15,23,42,0.9);border:1px solid rgba(148,163,184,0.8);}

    /* ECG */
    .heart-line-wrapper{margin:0.4rem 0 0.5rem;}
    .heart-line{width:100%;height:48px;}
    .heart-line polyline{
      fill:none;stroke:#fb7185;stroke-width:2;stroke-linejoin:round;stroke-linecap:round;
      stroke-dasharray:180;stroke-dashoffset:360;animation:ecg 2s linear infinite;
      filter:drop-shadow(0 0 6px rgba(248,113,113,0.7));
    }
    @keyframes ecg{to{stroke-dashoffset:0}}

    .bp-display{display:flex;align-items:flex-end;gap:0.6rem;position:relative;z-index:1;margin-bottom:0.4rem;}
    .bp-main{font-size:2.5rem;font-weight:800;letter-spacing:0.02em;color:#fff;}
    .bp-sub{font-size:0.75rem;color:#cbd5f5;}
    .bp-chip{font-size:0.78rem;padding:0.15rem 0.6rem;border-radius:999px;background:rgba(15,23,42,0.4);border:1px solid rgba(226,232,240,0.7);color:#e5e7ff;}

    .bp-bar-wrap{margin-top:0.6rem;position:relative;z-index:1;}
    .bp-bar{height:7px;border-radius:999px;background:linear-gradient(90deg,#16a34a,#facc15,#b92d50);position:relative;overflow:hidden;}
    .bp-indicator{position:absolute;top:-4px;width:2px;height:15px;border-radius:999px;background:#e5e7ff;left:62%;box-shadow:0 0 8px rgba(248,250,252,0.9);}
    .bp-legend{display:flex;justify-content:space-between;margin-top:0.4rem;font-size:0.72rem;color:#cbd5f5;}

    .hero-card-footer{margin-top:0.7rem;font-size:0.8rem;color:#cbd5f5;}
    .hero-tag-row{display:flex;flex-wrap:wrap;gap:0.4rem;margin-top:0.4rem;font-size:0.74rem;}
    .hero-tag-row span{padding:0.1rem 0.5rem;border-radius:999px;background:rgba(15,23,42,0.35);border:1px solid rgba(148,163,184,0.6);color:#e5e7ff;}

    /* QUTU İÇİ BAŞLIQLAR ÜÇÜN SADƏ DİZAYN (TAM QARALDI) */
    .card-header-left {
      grid-column: 1 / -1; 
      text-align: left; 
      margin-bottom: 1.5rem;
    }
    .card-header-left .section-title {
      color: #0f172a; 
      font-size: 1.8rem;
      margin-bottom: 0.5rem;
    }
    .card-header-left .section-subtitle {
      color: #475569; 
      font-size: 1.3rem;
      max-width: 100%; 
      margin: 0; 
    }

    .card-header-left.white-text .section-title {
      color: #ffffff; 
    }
    .card-header-left.white-text .section-subtitle {
      color: #ffffff;
    }

    .section-title{font-size:1.45rem;font-weight:700;margin-bottom:0.4rem;color:#fff;}
    .section-subtitle{font-size:1.3rem;color:#cbd5f5;margin-bottom:1.3rem;max-width:36rem;}

    .grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem;}
    .card{
      background:var(--card-bg);border-radius:1rem;padding:1.1rem 1.2rem;
      border:1px solid rgba(209,213,219,0.9);
      box-shadow:0 14px 40px rgba(15,23,42,0.65);
      transition:transform 0.18s ease-out, box-shadow 0.18s ease-out, border-color 0.18s;
    }
    .card:hover{transform:translateY(-4px) translateZ(0);box-shadow:0 26px 60px rgba(15,23,42,0.8);border-color:#2563eb;}
    .card h3{font-size:1rem;margin-bottom:0.4rem;}
    .card p{font-size:0.9rem;color:var(--muted);}
    ul{list-style:disc;padding-left:1.1rem;font-size:0.9rem;}
    ul li+li{margin-top:0.3rem;}

    table{width:100%;border-collapse:collapse;font-size:0.86rem;margin-top:0.6rem;}
    th,td{padding:0.6rem 0.6rem;border-bottom:1px solid rgba(209,213,219,0.9);}
    th{background:#eff6ff;color:#1f2937;text-align:left;}
    tbody tr:nth-child(even){background:#f9fafb;}

    /* Calculator */
    .calc-grid{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,2.3fr);gap:1.6rem;}
    .calc-inputs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0.7rem;margin:0.7rem 0 0.9rem;}
    .calc-input-group label{font-size:1rem;color:var(--muted);}
    .calc-input-group input{margin-top:0.25rem;}
    .calc-note{font-size:0.95rem;color:var(--muted);}
    .calc-btn{
      margin-top:0.2rem;padding:0.55rem 1.2rem;border-radius:999px;border:none;
      background:linear-gradient(135deg,#b92d50,#ff4b6a);color:white;font-size:0.86rem;font-weight:600;
      cursor:pointer;box-shadow:0 10px 24px rgba(185,45,80,0.5);
      transition:transform 0.12s, box-shadow 0.12s;
    }
    .calc-btn:hover{transform:translateY(-1px);box-shadow:0 14px 34px rgba(185,45,80,0.7);}
    .calc-result-card{
      background:#fff;border-radius:1rem;padding:1rem 1.1rem;border:1px solid rgba(209,213,219,1);
      box-shadow:0 12px 30px rgba(15,23,42,0.65);
      min-height:130px;display:flex;flex-direction:column;justify-content:center;
      opacity:0;transform:translateY(12px) scale(0.98);
      transition:opacity 0.25s ease-out, transform 0.25s ease-out, border-color 0.2s;
    }
    .calc-result-card.show{opacity:1;transform:translateY(0) scale(1);}
    .calc-result-title{font-size:1.5rem;color:var(--muted);margin-bottom:0.3rem;}
    .calc-result-main{font-size:1.5rem;font-weight:700;margin-bottom:0.2rem;}
    .calc-result-desc{font-size:1.2rem;color:var(--muted);}
    .calc-chip{display:inline-block;font-size:0.78rem;padding:0.15rem 0.55rem;border-radius:999px;margin-top:0.35rem;}
    .result-normal{border-color:#22c55e;}
    .result-normal .calc-result-main{color:#16a34a;}
    .result-normal .calc-chip{background:#dcfce7;color:#166534;}
    .result-elevated{border-color:#3b82f6;}
    .result-elevated .calc-result-main{color:#2563eb;}
    .result-elevated .calc-chip{background:#dbeafe;color:#1d4ed8;}
    .result-stage1{border-color:#f97316;}
    .result-stage1 .calc-result-main{color:#f97316;}
    .result-stage1 .calc-chip{background:#ffedd5;color:#9a3412;}
    .result-stage2{border-color:#ef4444;}
    .result-stage2 .calc-result-main{color:#ef4444;}
    .result-stage2 .calc-chip{background:#fee2e2;color:#991b1b;}
    .result-crisis{border-color:#b91c1c;animation:crisisPulse 1s ease-in-out infinite alternate;}
    .result-crisis .calc-result-main{color:#b91c1c;}
    .result-crisis .calc-chip{background:#fee2e2;color:#7f1d1d;}
    @keyframes crisisPulse{0%{box-shadow:0 12px 32px rgba(248,113,113,0.4)}100%{box-shadow:0 16px 40px rgba(248,113,113,0.7)}}

    /* Diary */
    .diary-layout{display:grid;grid-template-columns:minmax(0,2.8fr) minmax(0,2.2fr);gap:1.6rem;}
    .diary-code{
      background:#0f172a;font-family:"SF Mono",Menlo,Monaco,Consolas,"Liberation Mono",monospace;
      font-size:0.78rem;color:#e5e7eb;border-radius:0.9rem;padding:0.9rem 1rem;border:1px solid #1f2937;
      overflow-x:auto;box-shadow:0 18px 40px rgba(15,23,42,0.8);
    }
    .chart-wrapper{
      margin:0.9rem 0 0.8rem;background:#fff;border-radius:0.8rem;
      padding:0.6rem 0.8rem 0.4rem;border:1px solid #e5e7eb;height:260px;
    }
    #bpChart{width:100%;height:100%;}
    .table-wrapper{max-height:210px;overflow-y:auto;margin-top:0.4rem;border-radius:0.7rem;border:1px solid #e5e7eb;background:#f9fafb;}
    .table-wrapper table{margin:0;}
    .diary-form-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0.5rem;margin-top:0.4rem;}
    .diary-form-grid label{font-size:0.78rem;color:var(--muted);}
    .diary-form-grid input{
      margin-top:0.15rem;width:100%;padding:0.4rem 0.55rem;border-radius:0.4rem;
      border:1px solid #d1d5db;font-size:0.8rem;
    }
    .diary-form-grid input:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 1px rgba(37,99,235,0.4);}
    .diary-btn{
      margin-top:0.6rem;padding:0.45rem 1.1rem;border-radius:999px;border:none;
      background:linear-gradient(135deg,#2563eb,#3b82f6);color:#fff;font-size:0.8rem;font-weight:600;cursor:pointer;
      box-shadow:0 8px 20px rgba(37,99,235,0.45);transition:transform 0.12s, box-shadow 0.12s;
    }
    .diary-btn:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(37,99,235,0.65);}
    .diary-clear-btn{
      margin-top:0.5rem;padding:0.35rem 0.9rem;font-size:0.75rem;border-radius:999px;
      border:1px dashed #9ca3af;background:transparent;color:#6b7280;cursor:pointer;
    }
    .diary-clear-btn:hover{border-style:solid;color:#4b5563;background:#f3f4f6;}
    .diary-notice{margin-top:0.4rem;padding:0.4rem 0.65rem;border-radius:0.6rem;font-size:0.8rem;}
    .notice-normal{background:#dcfce7;color:#166534;border:1px solid #16a34a;}
    .notice-elevated{background:#dbeafe;color:#1d4ed8;border:1px solid #2563eb;}
    .notice-stage1{background:#ffedd5;color:#9a3412;border:1px solid #f97316;}
    .notice-stage2{background:#fee2e2;color:#991b1b;border:1px solid #ef4444;}
    .notice-crisis{background:#fee2e2;color:#7f1d1d;border:1px solid #b91c1c;}

    /* About */
    .about-grid{display:grid;grid-template-columns:minmax(0,2.5fr) minmax(0,2.1fr);gap:1.6rem;}
    .pill{
      display:inline-flex;align-items:center;gap:0.3rem;font-size:0.78rem;padding:0.18rem 0.7rem;border-radius:999px;
      border:1px solid rgba(209,213,219,0.9);background:#eff6ff;margin-bottom:0.5rem;color:#1d4ed8;
    }
    .pill-dot{width:6px;height:6px;border-radius:999px;background:#b92d50;}
    .about-intro{font-size:0.9rem;margin-bottom:0.5rem;color:#ffffff;}
    form{display:grid;gap:0.7rem;}
    label{font-size:0.8rem;color:var(--muted);margin-bottom:0.1rem;display:block;}
    input,textarea{
      width:100%;padding:0.55rem 0.7rem;border-radius:0.6rem;border:1px solid rgba(209,213,219,1);
      background:#f9fafb;color:var(--text);font-size:0.88rem;font-family:inherit;
    }
    textarea{min-height:110px;resize:vertical;}
    input:focus,textarea:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 1px rgba(37,99,235,0.4);}
    .btn-submit{
      margin-top:0.2rem;padding:0.55rem 1.3rem;border-radius:999px;border:none;
      background:linear-gradient(135deg,#22c55e,#16a34a);color:#022c22;font-size:0.86rem;font-weight:600;cursor:pointer;
      justify-self:flex-start;box-shadow:0 14px 36px rgba(22,163,74,0.45);transition:transform 0.12s, box-shadow 0.12s;
    }
    .btn-submit:hover{transform:translateY(-1px);box-shadow:0 18px 46px rgba(22,163,74,0.65);}

    /* Doctors */
    .doctor-section-card{
      background:#202b70;border-radius:1.2rem;padding:1.2rem 1.1rem 1.4rem;
      box-shadow:0 22px 50px rgba(15,23,42,0.85);border:1px solid #37429b;
    }
    .doctor-carousel{position:relative;margin-top:0.6rem;}
    .doctor-track{
      display:flex;gap:1rem;overflow-x:auto;padding:0.2rem 0.1rem 0.8rem;
      scroll-snap-type:x mandatory;
    }
    .doctor-track::-webkit-scrollbar{height:8px;}
    .doctor-track::-webkit-scrollbar-thumb{background:#4b5563;border-radius:999px;}
    .doctor-card{
      min-width:280px;max-width:300px;
      background:#0f172a;border-radius:1rem;padding:1.05rem 1rem 1.1rem;
      text-align:center;color:#e5e7eb;scroll-snap-align:center;
      box-shadow:0 14px 36px rgba(15,23,42,0.9);
      border:1px solid rgba(255,255,255,0.06);
    }
    .doctor-photo{
      width:170px;height:170px;border-radius:999px;margin:0 auto 0.65rem;
      background-size:cover;background-position:center;
      border:3px solid #b92d50;box-shadow:0 0 0 3px rgba(185,45,80,0.35);
    }
    .doctor-name{font-size:1.1rem;font-weight:800;margin-top:0.35rem;color:#ffffff;}
    .doctor-spec{font-size:0.85rem;color:#9ca3af;}
    .doctor-hospital{margin-top:0.25rem;font-size:0.8rem;color:#e5e7eb;}
    .carousel-arrow{
      position:absolute;top:50%;transform:translateY(-50%);
      width:34px;height:34px;border-radius:999px;border:none;
      background:rgba(15,23,42,0.85);color:#e5e7eb;cursor:pointer;
      display:flex;align-items:center;justify-content:center;
      box-shadow:0 10px 24px rgba(15,23,42,0.9);
    }
    .carousel-arrow.left{left:-6px;}
    .carousel-arrow.right{right:-6px;}
    .carousel-arrow:hover{background:#111827;}
    .doctor-actions{
      display:flex;gap:0.7rem;flex-wrap:wrap;align-items:center;justify-content:space-between;
      margin-top:0.9rem;
    }
    .all-doctors-link{
      display:inline-flex;align-items:center;gap:0.45rem;
      background:rgba(255,255,255,0.08);
      border:1px solid rgba(255,255,255,0.16);
      color:#e5e7ff;
      padding:0.55rem 0.9rem;border-radius:999px;
      font-weight:700;font-size:0.85rem;
      transition:transform 0.12s, background 0.12s, border-color 0.12s;
    }
    .all-doctors-link:hover{transform:translateY(-1px);background:rgba(255,255,255,0.12);border-color:rgba(255,255,255,0.28);}

    /* ===== QUIZ (CENTERED & CLEAN) ===== */
    .quiz-shell {
      background: #ffffff;
      border: 1px solid var(--border);
      border-radius: 1.4rem;
      box-shadow: 0 16px 40px rgba(15,23,42,0.08);
      overflow: hidden;
      position: relative;
      max-width: 800px;
      margin: 0 auto;
    }
    
    .quiz-topbar {
      display: flex; align-items: center; justify-content: space-between;
      padding: 0.9rem 1.2rem;
      border-bottom: 1px solid var(--border);
      background: #f8fafc;
    }
    .quiz-badges { display: flex; gap: 0.6rem; }
    .quiz-badge {
      font-size: 1.1rem;
      font-weight: 800;
      padding: 0.3rem 0.9rem;
      border-radius: 999px;
      background: #e2e8f0; color: var(--text);
    }
    .quiz-badge strong { color: var(--primary); }
    
    .quiz-timer {
      font-weight: 900; 
      font-size: 1.4rem;
      color: var(--accent);
      background: #fee2e2; 
      padding: 0.3rem 1rem;
      border-radius: 0.5rem;
    }
    
    .quiz-share {
      display: inline-flex; align-items: center; gap: 0.4rem;
      background: none; border: 1px solid var(--border);
      color: var(--text); border-radius: 999px;
      padding: 0.4rem 0.9rem; font-weight: 600; font-size: 1rem;
      cursor: pointer; transition: 0.2s;
    }
    .quiz-share:hover { background: #e2e8f0; }

    .quiz-progress-wrap { 
      width: 100%; 
      background: #e2e8f0; 
      height: 6px; 
    }
    .quiz-progress {
      height: 100%;
      width: 100%;
    }
    #quizBar {
      height: 100%; 
      width: 100%; 
      background: linear-gradient(90deg, #2563eb, #3b82f6, #b92d50);
      transform-origin: left center; 
      transform: scaleX(1); 
      transition: transform 1s linear;
    }

    .centered-quiz {
      padding: 2.5rem 1.5rem;
      display: flex; flex-direction: column; align-items: center; text-align: center;
    }
    .quiz-title {
      color: var(--text); font-size: 1.4rem; font-weight: 800; line-height: 1.35;
      margin-bottom: 1.5rem; max-width: 600px;
    }

    .vertical-options {
      display: flex; flex-direction: column; gap: 0.8rem;
      width: 100%; max-width: 500px;
    }
    .quiz-option {
      display: flex; align-items: center; gap: 1rem;
      border: 2px solid var(--border); border-radius: 1rem;
      padding: 1rem 1.2rem; cursor: pointer;
      background: #ffffff; transition: 0.2s; text-align: left;
    }
    .quiz-option:hover { border-color: var(--primary); background: #f8fafc; transform: translateY(-2px); }
    
    .quiz-letter {
      display: flex; align-items: center; justify-content: center;
      width: 36px; height: 36px; border-radius: 50%;
      background: #b8caf7; font-weight: 800; color: var(--muted);
      flex-shrink: 0;
      font-size: 1.2rem;
    }
    .quiz-text { font-weight: 700; font-size: 1rem; color: var(--text); line-height: 1.3; }

    .quiz-option.correct-choice {
      background: #dcfce7 !important;
      border-color: #22c55e !important;
      transform: scale(1.02);
    }
    .quiz-option.correct-choice .quiz-letter {
      background: #22c55e; color: #ffffff; border-color: #16a34a;
    }
    .quiz-option.correct-choice .quiz-text { color: #166534; }

    .quiz-option.wrong-choice {
      background: #fee2e2 !important;
      border-color: #ef4444 !important;
      transform: scale(0.98);
    }
    .quiz-option.wrong-choice .quiz-letter {
      background: #ef4444; color: #ffffff; border-color: #dc2626;
    }
    .quiz-option.wrong-choice .quiz-text { color: #991b1b; }

    .quiz-feedback-box {
      margin-top: 2rem; font-size: 0.95rem; color: var(--muted);
      max-width: 500px; text-align: center; min-height: 24px;
    }

    .centered-footer {
      display: flex; align-items: center; justify-content: space-between; gap: 1rem;
      padding: 1.2rem 1.5rem; background: #f8fafc; border-top: 1px solid var(--border);
    }
    .quiz-muted-btn {
      background: none; border: none; color: var(--muted); font-weight: 600;
      cursor: pointer; font-size: 0.9rem; transition: 0.2s;
    }
    .quiz-muted-btn:hover { color: var(--text); }
    
    .quiz-cta-main {
      padding: 0.8rem 2.5rem; border-radius: 999px; border: none;
      background: var(--primary); 
      color: #ffffff; font-size: 1.1rem; font-weight: 700;
      font-family: inherit;
      cursor: pointer; box-shadow: 0 10px 25px rgba(37,99,235,0.4);
      transition: 0.2s;
    }
    .quiz-cta-main:hover {
      transform: translateY(-2px); box-shadow: 0 14px 30px rgba(37,99,235,0.6);
      background: #1d4ed8; 
    }

    .about-list-white{color:#ffffff;}



    .reveal{opacity:0;transform:translateY(26px);transition:opacity 0.6s ease-out, transform 0.6s ease-out;}
    .reveal.visible{opacity:1;transform:translateY(0);}

    /* İNTERAKTİV REAL ANATOMİK BƏDƏN */
    .text-center { text-align: center; }
    .text-center .section-subtitle { margin-inline: auto; }

    .interactive-body-container {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
      gap: 2.5rem;
      background: #ffffff;
      border-radius: 1.5rem;
      padding: 2.5rem;
      box-shadow: 0 16px 40px rgba(15,23,42,0.06);
      border: 1px solid var(--border);
      align-items: center;
    }

    .body-map {
      position: relative;
      width: 100%;
      max-width: 220px;
      margin: 0 auto;
      aspect-ratio: 100 / 250;
    }
    .human-svg { width: 100%; height: 100%; display: block; }

   /* İNTERAKTİV TİBBİ PANEL DİZAYNI */
    .risk-panel-container {
      display: grid;
      grid-template-columns: 250px 1fr;
      gap: 0;
      background: #ffffff;
      border-radius: 1.2rem;
      box-shadow: 0 16px 40px rgba(15,23,42,0.06);
      border: 1px solid var(--border);
      overflow: hidden; 
    }

    .risk-menu {
      display: flex;
      flex-direction: column;
      background: #f8fafc;
      border-right: 1px solid var(--border);
    }

    .risk-tab {
      background: none;
      border: none;
      padding: 1.2rem 1.5rem;
      text-align: left;
      font-size: 0.95rem;
      font-weight: 600;
      color: var(--muted);
      cursor: pointer;
      border-left: 4px solid transparent;
      transition: all 0.2s ease;
    }

    .risk-tab:hover { background: #f1f5f9; color: var(--text); }
    
    .risk-tab.active {
      background: #ffffff;
      color: var(--primary);
      border-left: 4px solid var(--primary);
      box-shadow: 4px 0 10px rgba(0,0,0,0.02);
    }

    .risk-content {
      padding: 2.5rem;
      transition: opacity 0.3s ease;
    }

    .risk-title { font-size: 1.6rem; color: #0f172a; margin-bottom: 0.8rem; }
    .risk-divider { width: 40px; height: 4px; background: #b92d50; border-radius: 2px; margin-bottom: 1.2rem; }
    .risk-text { font-size: 1.05rem; color: #475569; line-height: 1.7; }

    /* İNTERAKTİV DAMAR SLAYDERİ */
    .vessel-container {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
      gap: 3rem;
      row-gap: 1rem !important;
      background: #ffffff;
      border-radius: 1.5rem;
      padding: 3rem 2.5rem;
      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
      border: 1px solid var(--border);
      align-items: center;
    }

    .vessel-visual-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .vessel-ring {
      width: 180px;
      height: 180px;
      border-radius: 50%;
      background: #ef4444; 
      border: 8px solid #fecaca; 
      box-shadow: inset 0 0 20px rgba(153, 27, 27, 0.8), 0 10px 25px rgba(0,0,0,0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: border-width 0.2s ease, border-color 0.2s ease;
      position: relative;
    }

    .vessel-blood {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background: radial-gradient(circle, #ef4444 40%, #b91c1c 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      animation: pulse-blood 1.5s infinite alternate;
    }

    .blood-cells { font-size: 2rem; opacity: 0.8; }

    @keyframes pulse-blood {
      0% { transform: scale(0.95); opacity: 0.8; }
      100% { transform: scale(1.02); opacity: 1; }
    }

    .vessel-caption {
      margin-top: 1.5rem;
      font-size: 1.5rem;
      font-weight: 600;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    .vessel-controls {
      display: flex;
      flex-direction: column;
      gap: 2rem;
    }

    .slider-wrapper { width: 100%; }
    .slider-label { font-size: 1.1rem; font-weight: 700; color: #0f172a; display: block; margin-bottom: 1rem; }
    .slider-label span { color: var(--primary); font-size: 1.3rem; }
    
    .bp-slider {
      -webkit-appearance: none;
      width: 100%;
      height: 8px;
      border-radius: 999px;
      background: linear-gradient(90deg, #16a34a 0%, #16a34a 25%, #facc15 25%, #facc15 50%, #ef4444 50%, #b91c1c 100%);
      outline: none;
      opacity: 0.9;
      transition: opacity 0.2s;
    }
    .bp-slider:hover { opacity: 1; }
    
    .bp-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: #ffffff;
      border: 3px solid #2563eb;
      cursor: pointer;
      box-shadow: 0 4px 10px rgba(0,0,0,0.2);
      transition: transform 0.1s;
    }
    .bp-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }

    .slider-ticks {
      position: relative;
      height: 1.3rem;
      margin-top: 0.6rem;
      font-size: 0.8rem;
      font-weight: 600;
      color: var(--muted);
    }
    .slider-ticks span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
    .tick-ideal { left: 12.5%; color: #16a34a; }
    .tick-elevated { left: 37.5%; color: #b45309; }
    .tick-hyper { left: 75%; color: #dc2626; }

    .vessel-info-box {
      background: #f8fafc;
      border-radius: 1rem;
      padding: 1.8rem;
      border-left: 5px solid #16a34a; 
      transition: all 0.3s ease;
      min-height: 280px; 
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .vstate-title { font-size: 1.4rem; font-weight: 800; color: #0f172a; margin-bottom: 0.4rem; }
    .vstate-numbers { font-size: 1rem; font-weight: 700; color: #475569; margin-bottom: 0.8rem; display: flex; align-items: center; gap: 0.5rem; }
    .dot-sep { color: #cbd5e1; }
    .vstate-desc { 
      font-size: 1.3rem; 
      color: #475569; 
      line-height: 1.6; 
      min-height: 80px; 
    }

    /* TƏZYİQİ ÖLÇMƏ BÖLMƏSİNİN XÜSUSİ DİZAYNLARI */
    .measure-header { margin-bottom: 2rem; }
    .measure-header .section-subtitle { margin-inline: auto; }

    /* --- BURA DƏYİŞDİ: 1fr 1fr əvəzinə 1.2fr 0.8fr --- */
    .posture-container {
      display: grid;
      grid-template-columns: 1.2fr 0.8fr; 
      gap: 3rem;
      row-gap: 1.5rem;
      background: #ffffff;
      border-radius: 1.5rem;
      padding: 3rem;
      box-shadow: 0 16px 40px rgba(15,23,42,0.06);
      border: 1px solid var(--border);
    }

    .pre-measure-box {
      background: #f8fafc;
      padding: 2rem;
      border-radius: 1.2rem;
      border-left: 5px solid #eab308;
    }

    /* BURA ƏLAVƏ EDİLDİ (HTML-də rules-grid yaradıldığı üçün) */
    .rules-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2rem;
    }

    .pre-measure-title {
      color: #0f172a;
      font-size: 1.2rem;
      margin-bottom: 1.2rem;
    }

    .forbidden-icons {
      display: flex;
      gap: 1.2rem;
      margin-bottom: 2rem;
      flex-wrap: wrap;
    }
    .f-icon {
      position: relative;
      background: #fff;
      width: 60px; height: 60px;
      display: flex; align-items: center; justify-content: center;
      border-radius: 12px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.05);
      cursor: help;
      transition: transform 0.2s;
    }
    .f-icon:hover { transform: translateY(-3px); }
    .f-icon .strike {
      position: absolute;
      width: 100%; height: 4px;
      background: #ef4444;
      transform: rotate(45deg);
      border-radius: 2px;
    }

    .pre-checklist { display: flex; flex-direction: column; gap: 1rem; }
    .check-item { display: flex; align-items: center; gap: 0.8rem; }
    .check-circle { 
      background: #16a34a; color: white; min-width: 24px; height: 24px; 
      display: flex; align-items: center; justify-content: center; 
      border-radius: 50%; font-size: 0.8rem; font-weight: bold;
    }
    .cross-circle { 
      background: #ef4444; color: white; min-width: 24px; height: 24px; 
      display: flex; align-items: center; justify-content: center; 
      border-radius: 50%; font-size: 0.8rem; font-weight: bold;
    }
    .check-item p { margin: 0; font-size: 1rem; color: #475569; }

    .posture-map-box { display: flex; justify-content: center; position: relative; }
    .posture-map { position: relative; width: 100%; max-width: 300px; aspect-ratio: 1/1; }

    .posture-dot {
      position: absolute; width: 24px; height: 24px;
      background: #16a34a; border-radius: 50%;
      cursor: pointer; transform: translate(-50%, -50%);
      box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.7);
      animation: pulse-green 2s infinite;
      border: 3px solid #fff;
      transition: all 0.2s;
      z-index: 5;
    }
    .posture-dot:hover, .posture-dot.active { transform: translate(-50%, -50%) scale(1.3); animation: none; box-shadow: 0 0 15px rgba(22, 163, 74, 0.8); z-index: 20;}

    /* --- BURA DƏYİŞDİ: Nöqtələrin Yeni Koordinatları --- */
    .p-mouth { top: 21%; left: 35%; } 
    .p-back { top: 45%; left: 20%; }
    .p-arm { top: 48%; left: 55%; }
    .p-feet { top: 88%; left: 45%; } 

    @keyframes pulse-green {
      0% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.7); }
      70% { box-shadow: 0 0 0 12px rgba(22, 163, 74, 0); }
      100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
    }

    .posture-tooltip {
      position: absolute; 
      top: 10px; 
      left: 10px; 
      right: 10px;
      background: rgba(15, 23, 42, 0.95); 
      color: #fff;
      padding: 1.2rem; 
      border-radius: 0.8rem;
      opacity: 0; 
      pointer-events: none !important; 
      transform: translateY(-10px);
      transition: all 0.3s ease;
      z-index: 50;
    }
    .posture-tooltip.show { 
      opacity: 1; 
      transform: translateY(0); 
    }
    
    .posture-tooltip strong { 
      display: block; 
      color: #22c55e; 
      margin-bottom: 0.4rem; 
      font-size: 1.4rem; 
      font-family: inherit; 
    }
    
    .posture-tooltip p { 
      margin: 0; 
      font-size: 1.2rem; 
      line-height: 1.5; 
      color: #cbd5e1;
      font-family: inherit; 
    }
    
    /* Səhər və Axşam qutuları */
    .schedule-blocks { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 1rem; }
    .schedule-block { border-radius: 0.8rem; overflow: hidden; }
    .morning-block { border: 1px solid #ef4444; }
    .morning-header { background: #ef4444; color: white; padding: 1rem; font-weight: bold; }
    .morning-body { background: #fef2f2; padding: 1rem; text-align: center; color: #0f172a; font-weight: 600; }
    .evening-block { border: 1px solid #1e3a8a; }
    .evening-header { background: #1e3a8a; color: white; padding: 1rem; font-weight: bold; }
    .evening-body { background: #eff6ff; padding: 1rem; text-align: center; color: #0f172a; font-weight: 600; }

    /* 3D FLIP KARTLAR (MİFLƏR) */
    .flip-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 2rem;
      perspective: 1000px; 
    }

    .flip-card {
      background-color: transparent;
      height: 410px;
      border-radius: 1.2rem;
      cursor: pointer;
    }

    .flip-card-inner {
      position: relative;
      width: 100%;
      height: 100%;
      text-align: center;
      transition: transform 0.8s cubic-bezier(0.4, 0.2, 0.2, 1);
      transform-style: preserve-3d;
    }

@media (hover: hover) {
  .flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
  }
}

/* JS ilə idarə olunan klik effekti (Telefonlar üçün) */
.flip-card.is-flipped .flip-card-inner {
  transform: rotateY(180deg);
}

    .flip-card-front, .flip-card-back {
      position: absolute;
      width: 100%;
      height: 100%;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      border-radius: 1.2rem;
      padding: 2rem 1.5rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      box-shadow: 0 10px 30px rgba(15,23,42,0.05);
      border: 1px solid var(--border);
    }

    .flip-card-front {
      background-color: #ffffff;
      color: #0f172a;
    }
    .flip-icon { font-size: 3.5rem; margin-bottom: 1rem; }
    .flip-card-front h3 { font-size: 1.15rem; line-height: 1.5; color: #1e293b; margin-bottom: 1rem; }
    .click-hint { font-size: 0.85rem; color: #3b82f6; font-weight: 600; margin-top: auto; }

    .flip-card-back {
      background: linear-gradient(135deg, #1e3a8a, #3b82f6);
      color: white;
      transform: rotateY(180deg); 
    }
    .flip-card-back h3 { font-size: 1.2rem; color: #facc15; margin-bottom: 1rem; border-bottom: 2px solid rgba(255,255,255,0.2); padding-bottom: 0.5rem;}
    .flip-card-back p { font-size: 1.15rem; line-height: 1.6; color: #e2e8f0; }

    .premium-body-container {
      position: relative;
      width: 100%;
      max-width: 560px;
      aspect-ratio: 2600 / 1418; /* anatomiya.png-nin real nisbəti */
      margin: 0 auto;
      --intensity: 0;
    }

    .body-image {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
    }

    /* Orqan parıltıları: JS yalnız --intensity dəyişənini təyin edir,
       animasiya GPU-da (opacity/transform) gedir – box-shadow repaint-i yoxdur */
    .organ-glow {
      position: absolute;
      aspect-ratio: 1;
      border-radius: 50%;
      pointer-events: none;
      z-index: 10;
      background: radial-gradient(circle, rgba(255,60,60,0.95) 0%, rgba(255,60,60,0.45) 45%, transparent 72%);
      filter: blur(5px);
      opacity: calc(var(--intensity, 0) * 0.95);
      transform: translate(-50%, -50%) scale(calc(0.55 + var(--intensity, 0) * 0.65));
      transition: opacity 0.35s ease, transform 0.35s ease;
    }
    .brain-glow  { top: 13%;  left: 49.5%; width: 11%; }
    .heart-glow  { top: 46%;  left: 51%;   width: 15%; }
    .kidney-glow { width: 10%; }
    .left-kidney  { top: 60%; left: 48%; }
    .right-kidney { top: 60.5%; left: 54%; }




/* 1. ÜMUMİ PLANŞET VƏ KİÇİK EKRANLAR */
/* =========================================================
   SON VƏ MÜKƏMMƏL RESPONSİVE BLOKU (ENLİ MƏTN VERSİYASI)
   ========================================================= */

/* 1. PLANŞETLƏR (1024px) */
/* =========================================================
   SÜRÜŞMƏNİ VƏ UZUNSOVLUĞU BİTİRƏN FİNAL VERSİYA
   ========================================================= */

/* 1. PLANŞETLƏR (1024px) */
@media (max-width: 1024px) {
    .hero, .interactive-body-container, .vessel-container, 
    .posture-container, .grid-2, .diary-layout, .about-grid, .calc-grid,
    .risk-panel-container /* <-- BURA ƏLAVƏ OLUNDU: Səssiz Düşmən xilaskarı */ { 
        grid-template-columns: 1fr !important; 
        gap: 2.5rem !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* 2. TELEFONLAR (768px) - "ENLİ MƏTN" SİRRİ BURADADIR */


.project-info {
    text-align: center;
    color: #475569 !important;
    font-size: 1rem;
    line-height: 1.6;
    max-width: 900px;
}
.logos-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 45px;
}
.logos-wrapper img { height: 70px; width: auto; object-fit: contain; }
.support-text { font-size: 1.1rem; font-weight: 800; color: #1e293b; text-transform: uppercase; text-align: center; margin-bottom: 20px; }


/* KREATİV QUİZ NƏTİCƏSİ */
.creative-result-card {
    padding: 2.5rem 1.5rem;
    border-radius: 2rem;
    text-align: center;
    animation: bounceIn 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    color: #fff;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    position: relative;
    overflow: hidden;
    margin-top: 20px;
}

/* Uğurlu nəticə - Yaşıl Qradiyent */
.creative-success {
    background: linear-gradient(135deg, #059669, #10b981);
    border: 1px solid #34d399;
}

/* Zəif nəticə - Qırmızı/Narıncı Qradiyent */
.creative-warning {
    background: linear-gradient(135deg, #dc2626, #f87171);
    border: 1px solid #fca5a5;
}

.result-icon {
    width: 70px;
    height: 70px;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    backdrop-filter: blur(5px);
}

.result-icon svg {
    width: 40px;
    height: 40px;
    fill: #fff;
}

.creative-result-card h3 {
    font-size: 1.8rem;
    font-weight: 800;
    margin-bottom: 1rem;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.creative-result-card p {
    font-size: 1.1rem;
    line-height: 1.5;
    opacity: 0.9;
    margin-bottom: 1.5rem;
}

.final-score-pill {
    display: inline-block;
    padding: 0.5rem 1.5rem;
    background: rgba(0,0,0,0.2);
    border-radius: 999px;
    font-weight: 700;
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
}

.restart-btn-creative {
    background: #fff !important;
    color: #1f2937 !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
}

/* Animasiya */
@keyframes bounceIn {
    0% { opacity: 0; transform: scale(0.3); }
    50% { opacity: 1; transform: scale(1.05); }
    70% { transform: scale(0.9); }
    100% { transform: scale(1); }
}
/* ===== YENİLƏNMİŞ HƏRƏKƏTLİ LENT ===== */
/* ===== HƏRƏKƏTLİ LENT (DAHA ENLİ VƏ BÖYÜK) ===== */
.marquee-wrapper {
    display: flex;
    align-items: center;
    background: #ffffff; 
    padding: 25px 20px; /* BURA ARTIRILDI: Hündürlüyü (eni) xeyli böyütdük */
    border-bottom: 1px solid #e2e8f0;
    position: relative;
    z-index: 40;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); 
}

.marquee-label {
    font-size: 1.2rem; /* Yazını bir az böyütdük */
    font-weight: 800;
    color: #1e293b;
    white-space: nowrap;
    margin-right: 25px;
    padding-right: 25px;
    border-right: 2px solid #cbd5e1; 
}

.marquee-container {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.marquee-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: marqueeScroll 25s linear infinite;
}

.marquee-wrapper:hover .marquee-track {
    animation-play-state: paused;
}

.marquee-track img {
    height: 80px; /* BURA ARTIRILDI: Loqolar xeyli böyüdü (əvvəl 60 idi) */
    width: auto;
    object-fit: contain;
    padding-right: 60px;
}

@keyframes marqueeScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } 
}

/* Telefonlar üçün (Mobildə də enli oldu) */
/* ===== 768px MOBİL FİNAL BLOKU (HAMISI BİR YERDƏ) ===== */


/* ===== ÜMUMİ DÜZƏLİŞLƏR (MOBİL VƏ KOMPÜTER ÜÇÜN) ===== */
main {
    padding-top: 1rem !important; 
}
.hero {
    margin-top: 0 !important;
}

/* ===== YENİ FOOTER (KƏNARLARA TAM YAPIŞAN) ===== */
.site-footer {
    background-color: #ffffff;
    color: #475569;
    padding: 40px 20px;
    border-top: 1px solid #e2e8f0;
    width: 100%;
    margin-top: 40px;
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 15px;
    max-width: 800px;
    margin: 0 auto;
}

.footer-content strong {
    color: #1e293b !important; 
    font-weight: 700 !important;
}

.footer-logo {
    height: 80px; 
    width: auto;
    object-fit: contain;
    opacity: 1;
}

/* Başlığı və Banneri tam enində edirik */
.card-header-left, 
.posture-instruction, 
.schedule-blocks {
    grid-column: 1 / -1 !important; 
    width: 100%;
}

/* Bannerin vizual dizaynı */
.posture-instruction {
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.1), rgba(22, 163, 74, 0.1));
    border: 1px solid #cbd5e1;
    padding: 1.2rem 1.5rem;
    border-radius: 12px;
    color: #1e293b;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
}

.posture-instruction span {
    color: #16a34a;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.9em;
    background: #dcfce7;
    padding: 2px 8px;
    border-radius: 4px;
}

/* Mobildə hər şeyin səliqəli görünməsi üçün */

/* =========================================================
   MOBİL (768px) – BÜTÜN QAYDALAR BİR BLOKDA
   ========================================================= */
@media (max-width: 768px) {

    html, body { overflow-x: hidden !important; width: 100% !important; }

    /* ANA KONTEYNER: Yan boşluqları kəsirik ki, yazı divara qədər uzansın */
    main { 
        padding: 1rem 0.5rem 3rem !important; 
    }

    /* BÜTÜN MƏTN BLOKLARI: Uzunsovluğu (dar sütunu) sökən əsas hissə */
    .hero-subtitle, 
    .section-subtitle, 
    .vstate-desc, 
    .target-organs-box, 
    .quiz-title,
    .about-intro,
    .check-item p {
        width: 100% !important;
        max-width: 100% !important; /* Köhnə 36rem limitini sildik */
        text-align: left !important;  /* Sola söykəyirik ki, sağ tərəf dolsun */
        padding-right: 5px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* QUTULARIN DAXİLİ BOŞLUĞU: Mətni içəridən sıxmasın */
    .interactive-body-container, 
    .vessel-container, 
    .posture-container,
    .card {
        padding: 1.2rem 0.7rem !important; /* 2.5rem-dən 0.7-yə saldıq */
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Navbar */
    .nav { padding: 0.8rem 0.7rem !important; flex-direction: column !important; gap: 0.8rem !important; }
    .logo-text { display: none !important; }
   .nav-links { 
        width: 100%; 
        justify-content: center; 
        gap: 0.8rem !important; 
        flex-wrap: wrap !important; /* Ekrana sığmayanda alt sətirə düşsün */
    }
    .nav-links a { 
        font-size: 0.85rem !important; 
        background: transparent !important; /* O yumru kölgəni (fonu) ləğv edir */
        box-shadow: none !important; 
        padding: 0.2rem 0 !important; 
    }

    /* Hero */
    .hero-title { font-size: 1.8rem !important; line-height: 1.2 !important; text-align: center; }
    .massive-bp { flex-direction: column; align-items: center; padding: 1.2rem !important; margin: 0 auto; width: 90%; }
    .glass-target-logo { height: 70px !important; }

    .hero-badge-row, 
    .glass-badge, 
    .hero-note {
        white-space: normal !important; 
        height: auto !important; 
        display: flex !important;
        flex-wrap: wrap !important; 
        justify-content: center !important;
        text-align: center !important;
        border-radius: 12px !important; 
        padding: 0.5rem 0.8rem !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    /* Hədəf Orqanlar Vizualı */
    .premium-body-container {
        max-width: 100% !important;
        margin: 0 auto 1.5rem auto !important;
    }
    .target-organs-box { position: relative !important; top: 0 !important; }

    /* Slayder və Gündəlik fix */
    .vstate-desc { white-space: normal !important; line-height: 1.5 !important; }
    .table-wrapper { overflow-x: auto !important; width: 100% !important; }
    .diary-form-grid { grid-template-columns: 1fr 1fr !important; gap: 0.5rem !important; }

    /* Footer Loqoları */
    .logos-wrapper { 
        display: grid !important; 
        grid-template-columns: repeat(2, 1fr) !important; 
        gap: 20px !important; 
    }
    .logos-wrapper img { height: 45px !important; }
    /* QIZIL QAYDALAR: Yan-yana qalsın amma mobildə yığcam olsun */
    .rules-grid {
        gap: 0.8rem !important; /* Aralarındakı boşluğu azaltdıq */
    }
    .pre-measure-box {
        padding: 1.2rem 0.8rem !important; /* Qutunun iç boşluğunu daraltdıq */
    }
    .pre-measure-title {
        font-size: 0.95rem !important; /* Başlıqlar kiçildi */
        margin-bottom: 0.8rem !important;
    }
    .check-item p {
        font-size: 0.8rem !important; /* Şriftlər kiçildi ki, uzun görünməsin */
    }
    .f-icon {
        width: 40px !important; /* Qadağa ikonları kiçildi */
        height: 40px !important;
    }
    .forbidden-icons {
        gap: 0.6rem !important;
    }

    /* SƏSSİZ DÜŞMƏN (RİSK PANELİ): Menyunu üstdə qəşəng düzmək üçün */
    .risk-menu {
        flex-direction: row !important; /* Menyunu mobildə yan-yana edirik */
        overflow-x: auto !important; /* Ekrana sığmasa sağa-sola sürüşdürülsün */
        white-space: nowrap !important;
    }
    .risk-tab {
        border-left: none !important;
        border-bottom: 3px solid transparent !important;
        padding: 1rem !important;
        font-size: 0.9rem !important;
    }
    .risk-tab.active {
        border-left: none !important;
        border-bottom: 3px solid var(--primary) !important;
    }
    .risk-content {
        padding: 1.5rem 1rem !important;
    }

    /* 1. Loqo Lenti (Marquee) */
    .marquee-wrapper {
        flex-direction: column; 
        padding: 20px 10px;
    }
    .marquee-label {
        margin-right: 0; padding-right: 0; border-right: none;
        margin-bottom: 12px; font-size: 1.1rem;
    }
    .marquee-track img {
        height: 60px; padding-right: 40px;
    }

    /* 2. Quiz-in "çirkin" görünüşünü düzəldən hissə */
    .quiz-topbar {
        flex-wrap: wrap !important;
        padding: 1rem 0.8rem !important;
    }
    .quiz-badges { order: 1 !important; }
    .quiz-share { order: 2 !important; margin-left: auto !important; }
    .quiz-timer {
        order: 3 !important;
        width: max-content !important;
        margin: 15px auto 0 auto !important;
        font-size: 1.25rem !important;
    }
    .quiz-badge {
        font-size: 0.95rem !important;
        padding: 0.2rem 0.7rem !important;
    }

    /* 3. Footer-in mobil tənzimləməsi */
    .site-footer {
        padding: 30px 15px !important;
    }
    .footer-content p {
        font-size: 0.95rem;
    }
    .footer-logo {
        height: 45px !important;
    }

    .posture-instruction {
        font-size: 0.95rem !important;
        padding: 1rem !important;
        margin-bottom: 1.2rem !important;
    }
}