:root{
    --navy: #16233D;
    --navy-deep: #101a30;
    --sky: #35C0F2;
    --sky-light: #BDEBFB;
    --sun: #FFC93C;
    --sun-light: #FFE9AE;
    --grass: #6FCF56;
    --grass-deep: #4CAF3D;
    --coral: #FF7A5C;
    --cream: #FFFDF7;
    --ink: #16233D;
    --white: #ffffff;
    --radius-lg: 26px;
    --radius-md: 18px;
  }

  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    margin:0;
    font-family:'Nunito', sans-serif;
    background: #EAF6FB;
    color: var(--ink);
    overflow-x:hidden;
  }
  h1,h2,h3,.brand,.nav-pill{ font-family:'Baloo 2', sans-serif; }

  a{ color:inherit; text-decoration:none; }

  .bg-clouds{ position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
  .bg-clouds span{ position:absolute; opacity:.5; filter:blur(.5px); animation: drift linear infinite; }
  @keyframes drift{ from{ transform: translateX(-10vw); } to{ transform: translateX(110vw); } }

  header.top{
    position:relative; z-index:2;
    background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
    padding: 18px 4vw 28px;
  }
  .topbar{ display:flex; justify-content:flex-end; gap:22px; margin-bottom:18px; max-width:1440px; margin-left:auto; margin-right:auto; }
  .topbar a{
    font-weight:700; font-size:.92rem; color:#DCE7F5;
    padding:6px 4px; border-bottom:2px solid transparent;
    transition: color .2s, border-color .2s;
  }
  .topbar a:hover, .topbar a.active{ color: var(--sun); border-color: var(--sun); }

  .hero-row{ display:flex; align-items:center; gap:28px; flex-wrap:wrap; justify-content:space-between; max-width:1440px; margin-left:auto; margin-right:auto; }
  .brandblock{ display:flex; align-items:center; gap:22px; }
  .logo{
    width:104px; height:104px; border-radius:50%;
    background: linear-gradient(180deg, #BFE9FB 0%, #8FD8F5 55%, #6FCF56 55%, #4CAF3D 100%);
    position:relative; overflow:hidden; flex-shrink:0;
    box-shadow: 0 8px 24px rgba(0,0,0,.35), inset 0 0 0 4px rgba(255,255,255,.15);
    animation: bob 5s ease-in-out infinite;
  }
  .logo.small{ width:64px; height:64px; }
  @keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }
  .logo .cloud{ position:absolute; background:#fff; border-radius:50%; }
  .logo .cloud.c1{ width:30px; height:30px; top:18px; left:18px; }
  .logo .cloud.c2{ width:22px; height:22px; top:24px; left:40px; }
  .logo .cloud.c3{ width:18px; height:18px; top:14px; left:52px; }
  .logo.small .cloud.c1{ width:18px; height:18px; top:11px; left:11px; }
  .logo.small .cloud.c2{ width:13px; height:13px; top:15px; left:25px; }
  .logo.small .cloud.c3{ width:11px; height:11px; top:8px; left:32px; }

  .brand-text h1{
    margin:0; font-size:2.1rem; color:#fff; font-weight:800; letter-spacing:.5px;
    text-shadow: 0 3px 0 rgba(0,0,0,.15);
  }
  .brand-text.small h1{ font-size:1.5rem; }
  .brand-text p{
    margin:2px 0 0; font-size:1rem; color:var(--sun-light); font-weight:600;
    text-decoration:underline; text-decoration-color: rgba(255,201,60,.6); text-underline-offset:4px;
  }
  .brand-text.small p{ font-size:.78rem; }

  a.brandlink{ display:flex; }

  .best-badge{
    background: linear-gradient(135deg, var(--sky) 0%, #29A9DC 100%);
    border-radius: 20px; padding: 14px 22px; display:flex; align-items:center; gap:16px;
    box-shadow: 0 10px 20px rgba(53,192,242,.35);
  }
  .best-badge .label{ color:#fff; font-weight:800; font-size:1.05rem; white-space:nowrap; }
  .stars{ display:flex; gap:8px; }
  .stars .star{
    width:38px; height:38px; border-radius:50%;
    background: linear-gradient(180deg, #E9F8FF 0%, #BEE8FB 55%, #6FCF56 55%, #4CAF3D 100%);
    display:flex; align-items:center; justify-content:center; overflow:hidden;
    font-size:.68rem; font-weight:800; color:var(--navy);
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.5);
    transition: transform .25s;
  }
  .stars .star:hover{ transform: translateY(-5px) scale(1.08); }

  .navwrap{ position:relative; z-index:2; padding: 0 4vw; margin-top:-12px; }
  nav.menubar{
    background: linear-gradient(180deg, var(--sun-light) 0%, #FFE28C 100%);
    border-radius: 22px; padding: 16px 26px;
    display:flex; align-items:center; justify-content:space-between;
    box-shadow: 0 10px 24px rgba(255,201,60,.35); flex-wrap:wrap; gap:14px;
    max-width:1440px; margin-left:auto; margin-right:auto;
  }
  .menubar .links{ display:flex; gap:26px; flex-wrap:wrap; }
  .menubar .links a{
    font-weight:800; color:var(--navy); font-size:1rem;
    padding-bottom:3px; border-bottom:3px solid transparent;
    transition: border-color .2s, color .2s;
  }
  .menubar .links a:hover, .menubar .links a.active{ border-color: var(--coral); color: var(--coral); }
  .avatar{
    width:48px; height:48px; border-radius:50%;
    background: linear-gradient(180deg, #E9F8FF 0%, #BEE8FB 55%, #6FCF56 55%, #4CAF3D 100%);
    box-shadow: 0 0 0 3px #fff, 0 6px 14px rgba(0,0,0,.15);
  }

  .layout{
    position:relative; z-index:1;
    display:grid; grid-template-columns: 250px 1fr;
    gap: 26px; padding: 32px 4vw 60px; align-items:start;
    max-width:1440px; margin-left:auto; margin-right:auto;
  }
  @media (max-width: 880px){ .layout{ grid-template-columns: 1fr; } }
  @media (min-width: 1600px){ .layout{ gap:36px; } }

  aside.menuler{
    background:#fff; border-radius: var(--radius-lg); padding: 22px;
    box-shadow: 0 8px 22px rgba(22,35,61,.08); position:sticky; top:20px;
  }
  aside.menuler h2{ margin:0 0 16px; font-size:1.3rem; color:var(--navy); }
  aside.menuler ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
  aside.menuler li a{
    display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:12px;
    font-weight:700; color:#3A4A66; transition: background .2s, color .2s, transform .15s;
  }
  aside.menuler li a .dot{ width:9px; height:9px; border-radius:50%; background: var(--sky); flex-shrink:0; }
  aside.menuler li a:hover, aside.menuler li a.active{ background: var(--sky-light); color: var(--navy); transform: translateX(4px); }
  aside.menuler li a.active .dot{ background: var(--coral); }
  aside.menuler .promo{
    margin-top:22px; border-radius:16px; padding:16px;
    background: linear-gradient(135deg, var(--coral), #FF9C7E); color:#fff; text-align:center;
  }
  aside.menuler .promo strong{ display:block; font-family:'Baloo 2'; font-size:1.05rem; margin-bottom:6px; }
  aside.menuler .promo button{
    margin-top:10px; border:none; background:#fff; color:var(--coral);
    font-weight:800; padding:9px 16px; border-radius:999px; cursor:pointer;
    font-family:'Nunito'; transition: transform .15s;
  }
  aside.menuler .promo button:hover{ transform: scale(1.05); }

  main{ display:grid; grid-template-columns: 1fr 1fr; gap: 26px; }
  main.single{ grid-template-columns: 1fr; }
  @media (max-width: 640px){ main{ grid-template-columns: 1fr; } }

  section.panel{
    background:#fff; border-radius: var(--radius-lg); padding: 22px 22px 26px;
    box-shadow: 0 8px 22px rgba(22,35,61,.08); scroll-margin-top: 20px;
  }
  section.panel .panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
  section.panel h3{ margin:0; font-size:1.25rem; color:var(--navy); display:flex; align-items:center; gap:10px; }
  section.panel h3 .emoji{ font-size:1.3rem; }
  section.panel .see-all{ font-size:.82rem; font-weight:800; color: var(--sky); }
  section.panel p.lead{ color:#5A6B87; font-weight:600; line-height:1.6; margin:-6px 0 18px; }

  .card-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; }
  .card-grid.cols-3{ grid-template-columns: 1fr 1fr 1fr; }
  @media (max-width:720px){ .card-grid.cols-3{ grid-template-columns: 1fr 1fr; } }
  @media (max-width:420px){ .card-grid, .card-grid.cols-3{ grid-template-columns:1fr; } }

  .card{
    border-radius:16px; overflow:hidden; background:#F6FAFD;
    box-shadow: 0 3px 10px rgba(22,35,61,.06);
    transition: transform .2s, box-shadow .2s; cursor:pointer;
  }
  .card:hover{ transform: translateY(-5px); box-shadow: 0 12px 20px rgba(22,35,61,.14); }
  .card .thumb{ height:96px; display:flex; align-items:center; justify-content:center; font-size:2.1rem; position:relative; }
  .card .thumb .badge{
    position:absolute; bottom:6px; right:6px; background:rgba(22,35,61,.75); color:#fff;
    font-size:.68rem; padding:2px 7px; border-radius:8px; font-weight:700;
  }
  .card .thumb .play{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    background:rgba(16,26,48,0); transition:background .2s;
  }
  .card:hover .thumb .play{ background:rgba(16,26,48,.18); }
  .card .info{ padding:10px 12px 12px; }
  .card .info .t{ font-weight:800; font-size:.88rem; color:var(--navy); line-height:1.25; }
  .card .info .sub{ font-size:.72rem; color:#7A8AA3; margin-top:3px; font-weight:700; }
  .card .info .card-btn{
    display:inline-flex; align-items:center; gap:4px; margin-top:9px; padding:5px 12px;
    border-radius:999px; background: var(--sky); color:#fff; font-size:.72rem; font-weight:800;
    text-decoration:none; transition: transform .15s, background .2s;
  }
  .card .info .card-btn:hover{ transform: translateX(2px); background:#29A9DC; }

  .share-row{ display:flex; align-items:center; gap:6px; margin-top:8px; }
  .share-lbl{ font-size:.66rem; font-weight:700; color:#93A2B8; margin-right:2px; }
  .share-ic{
    width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-size:.78rem; background:#F0F3F8; text-decoration:none; transition: transform .15s, background .2s;
  }
  .share-ic:hover{ transform: scale(1.15); }
  .share-ic.share-wa:hover{ background:#DFF7E6; }
  .share-ic.share-fb:hover{ background:#E0EEFC; }
  .share-ic.share-tw:hover{ background:#E5F5FD; }
  .share-ic.share-tg:hover{ background:#E4F1FB; }

  .thumb.tv1{ background: linear-gradient(135deg,#35C0F2,#BDEBFB); }
  .thumb.tv2{ background: linear-gradient(135deg,#FF7A5C,#FFC7B8); }
  .thumb.tv3{ background: linear-gradient(135deg,#6FCF56,#C9F2BC); }
  .thumb.tv4{ background: linear-gradient(135deg,#FFC93C,#FFE9AE); }
  .thumb.tv5{ background: linear-gradient(135deg,#9B7BFF,#D9CBFF); }
  .thumb.tv6{ background: linear-gradient(135deg,#35C0F2,#DDF4FD); }

  .thumb.ms1{ background: linear-gradient(135deg,#9B7BFF,#D9CBFF); }
  .thumb.ms2{ background: linear-gradient(135deg,#FF7A5C,#FFD9CC); }
  .thumb.ms3{ background: linear-gradient(135deg,#35C0F2,#DDF4FD); }
  .thumb.ms4{ background: linear-gradient(135deg,#6FCF56,#E3F8DA); }
  .thumb.ms5{ background: linear-gradient(135deg,#FFC93C,#FFE9AE); }
  .thumb.ms6{ background: linear-gradient(135deg,#FF7A5C,#FFC7B8); }

  .thumb.hk1{ background: linear-gradient(135deg,#FFC93C,#FFF3D2); }
  .thumb.hk2{ background: linear-gradient(135deg,#35C0F2,#C7ECFA); }
  .thumb.hk3{ background: linear-gradient(135deg,#FF7A5C,#FFE0D6); }
  .thumb.hk4{ background: linear-gradient(135deg,#9B7BFF,#EAE1FF); }
  .thumb.hk5{ background: linear-gradient(135deg,#6FCF56,#E3F8DA); }
  .thumb.hk6{ background: linear-gradient(135deg,#35C0F2,#BDEBFB); }

  .thumb.bk1, .thumb.bk2, .thumb.bk3, .thumb.bk4, .thumb.bk5, .thumb.bk6{
    background: repeating-linear-gradient(45deg,#fff,#fff 6px,#F0F0F0 6px,#F0F0F0 12px);
  }

  .breadcrumb{ font-weight:700; font-size:.85rem; color:#7A8AA3; margin-bottom:10px; }
  .breadcrumb a{ color: var(--sky); }

  /* ---------- asistan: karşılama videosu ---------- */
  .asistan-video-wrap{
    margin-bottom:24px; background:#fff; border-radius:var(--radius-lg); padding:14px;
    box-shadow: 0 8px 22px rgba(22,35,61,.1);
  }
  .asistan-video-baslik{
    font-family:'Baloo 2'; font-weight:700; font-size:1.05rem; color:var(--navy);
    margin-bottom:10px; padding:0 4px;
  }
  .asistan-video-16-9{
    position:relative; padding-bottom:56.25%; height:0; border-radius:14px; overflow:hidden; background:#0B1220;
  }
  .asistan-video-16-9 iframe, .asistan-video-16-9 video{
    position:absolute; inset:0; width:100%; height:100%; border:0;
  }

  .icerik-blok-lm{
    position:relative; margin-bottom:22px; padding:10px; background:#F6FAFD; border-radius:14px;
    text-align:center; overflow:hidden;
  }

  .site-intro-blurb{
    background:#fff; border-radius: var(--radius-lg); padding:20px 24px; margin-bottom:22px;
    font-size:.95rem; line-height:1.75; color:#4C5C78; font-weight:600;
    box-shadow: 0 8px 20px rgba(22,35,61,.08);
  }

  .page-hero{
    background: linear-gradient(135deg, var(--sky) 0%, #6FCF56 100%);
    border-radius: var(--radius-lg); padding: 30px 32px; color:#fff; margin-bottom:26px;
    display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
    box-shadow: 0 10px 24px rgba(53,192,242,.25);
  }
  .page-hero h2{ margin:0 0 6px; font-size:1.9rem; }
  .page-hero p{ margin:0; font-weight:700; opacity:.95; max-width:520px; }
  .page-hero .icon{ font-size:3rem; }

  .contact-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap:26px; }
  @media (max-width:760px){ .contact-grid{ grid-template-columns: 1fr; } }
  .contact-maps-wrap{
    margin-top:22px; border-radius: var(--radius-lg); overflow:hidden; box-shadow: 0 8px 22px rgba(22,35,61,.1);
  }
  .contact-maps-wrap iframe{ width:100%; height:320px; display:block; }
  form.contact-form{ display:flex; flex-direction:column; gap:14px; }
  form.contact-form label{ font-weight:800; font-size:.85rem; color:var(--navy); }
  form.contact-form input, form.contact-form textarea{
    border:2px solid #E3ECF5; border-radius:12px; padding:11px 14px; font-family:'Nunito';
    font-size:.95rem; resize:vertical; outline:none; transition:border-color .2s;
  }
  form.contact-form input:focus, form.contact-form textarea:focus{ border-color: var(--sky); }
  form.contact-form button{
    margin-top:6px; border:none; background: linear-gradient(135deg, var(--coral), #FF9C7E);
    color:#fff; font-family:'Baloo 2'; font-weight:700; font-size:1.05rem;
    padding:13px 20px; border-radius:14px; cursor:pointer; transition: transform .15s;
  }
  form.contact-form button:hover{ transform: scale(1.02); }
  .contact-info{ display:flex; flex-direction:column; gap:14px; }
  .contact-info .item{
    background:#F6FAFD; border-radius:16px; padding:16px 18px; display:flex; gap:14px; align-items:flex-start;
  }
  .contact-info .item .ic{ font-size:1.5rem; }
  .contact-info .item h4{ margin:0 0 4px; font-size:.95rem; color:var(--navy); }
  .contact-info .item p{ margin:0; font-size:.85rem; color:#5A6B87; font-weight:600; }

  aside.menuler .sidebar-social{
    margin-top:14px; border-radius:16px; padding:16px;
    background: var(--sky-light); text-align:center;
  }
  aside.menuler .sidebar-social strong{ display:block; font-family:'Baloo 2'; font-size:.98rem; color:var(--navy); margin-bottom:10px; }
  aside.menuler .sidebar-social-icons{ display:flex; justify-content:center; gap:8px; flex-wrap:wrap; }
  aside.menuler .sidebar-social-icons a{
    width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-size:1.05rem; background:#fff; text-decoration:none; box-shadow:0 3px 8px rgba(22,35,61,.1);
    transition: transform .15s, background .2s;
  }
  aside.menuler .sidebar-social-icons a:hover{ transform: translateY(-3px) scale(1.08); background: var(--sun-light); }

  /* ---------- site footer ---------- */
  .site-footer{
    position:relative; z-index:1; margin-top:20px;
    background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
    color:#DCE7F5; padding: 40px 4vw 0;
  }
  .footer-grid{
    display:grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap:30px 36px;
    max-width:1300px; margin:0 auto; padding-bottom:30px; align-items:start;
  }
  .footer-brand-col{ grid-column: span 2; min-width:260px; }
  .footer-col h4{
    font-family:'Baloo 2'; font-size:.95rem; color:#fff; margin:0 0 14px;
  }
  .footer-col-kategori h4{ color: var(--sun); }
  .footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
  .footer-col ul li a{
    font-size:.85rem; color:#B9C7DD; font-weight:600; text-decoration:none; transition: color .2s;
  }
  .footer-col ul li a:hover{ color: var(--sun); }
  .footer-contact li{ font-size:.85rem; color:#B9C7DD; font-weight:600; }

  .footer-brand{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
  .footer-brand-name{ font-family:'Baloo 2'; font-size:1.3rem; color:#fff; font-weight:700; }
  .footer-desc{ font-size:.85rem; color:#B9C7DD; line-height:1.6; margin:0 0 16px; max-width:280px; }
  .footer-social{ display:flex; gap:8px; flex-wrap:wrap; }
  .footer-social a{
    width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,.1); text-decoration:none; transition: transform .15s, background .2s;
  }
  .footer-social a:hover{ transform: translateY(-3px); background:rgba(255,255,255,.2); }

  .footer-bottom{
    border-top:1px solid rgba(255,255,255,.1); padding:16px 0; text-align:center;
    font-size:.78rem; color:#8FA0BC; font-weight:600;
  }

  @media (max-width:900px){
    .footer-grid{ grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
    .footer-brand-col{ grid-column: 1 / -1; }
  }
  @media (max-width:520px){
    .footer-grid{ grid-template-columns: 1fr; text-align:center; }
    .footer-brand-col{ grid-column: auto; }
    .footer-brand{ justify-content:center; }
    .footer-social{ justify-content:center; }
    .footer-desc{ max-width:100%; }
  }

  /* ---------- PWA: uygulama yükleme bildirimi ---------- */
  .pwa-install-banner{
    position:fixed; left:16px; right:16px; bottom:16px; z-index:95; max-width:520px; margin:0 auto;
    background: var(--navy); color:#fff; border-radius:16px; padding:12px 14px;
    display:flex; align-items:center; gap:10px; box-shadow:0 12px 28px rgba(0,0,0,.3);
    animation: pwaSlideUp .3s ease-out;
  }
  @keyframes pwaSlideUp{ from{ transform: translateY(20px); opacity:0; } to{ transform: translateY(0); opacity:1; } }
  .pwa-install-icon{ font-size:1.4rem; flex-shrink:0; }
  .pwa-install-text{ flex:1; font-size:.8rem; font-weight:600; line-height:1.4; }
  .pwa-install-btn{
    flex-shrink:0; border:none; background: var(--sun); color:var(--navy); font-weight:800; font-size:.78rem;
    padding:8px 14px; border-radius:999px; cursor:pointer; font-family:'Nunito';
  }
  .pwa-install-close{
    flex-shrink:0; border:none; background:rgba(255,255,255,.15); color:#fff; width:24px; height:24px;
    border-radius:50%; cursor:pointer; font-size:.75rem;
  }
  @media (max-width:480px){
    .pwa-install-banner{ left:10px; right:10px; bottom:10px; padding:10px 12px; }
    .pwa-install-text{ font-size:.76rem; }
  }

  /* ---------- asistan: sol altta kompakt widget ---------- */
  .asistan-widget{
    position:fixed; left:20px; bottom:20px; z-index:85; width:320px; max-width:calc(100vw - 40px);
    background:#fff; border-radius:16px; padding:10px; box-shadow:0 14px 30px rgba(22,35,61,.28);
    opacity:1; transform: translateY(0) scale(1);
    transition: opacity .3s ease, transform .3s ease;
  }
  .asistan-widget.hide{ opacity:0; transform: translateY(16px) scale(.92); pointer-events:none; }
  .asistan-widget-close{
    position:absolute; top:-9px; right:-9px; width:24px; height:24px; border-radius:50%;
    border:none; background:var(--navy); color:#fff; cursor:pointer; font-size:.7rem;
    box-shadow:0 4px 10px rgba(0,0,0,.3); display:flex; align-items:center; justify-content:center;
  }
  .asistan-widget-sound{
    position:absolute; bottom:16px; right:16px; width:30px; height:30px; border-radius:50%;
    border:none; background:rgba(0,0,0,.55); color:#fff; cursor:pointer; font-size:.85rem;
    box-shadow:0 4px 10px rgba(0,0,0,.3); display:flex; align-items:center; justify-content:center;
    z-index:2; transition: transform .15s, background .2s;
  }
  .asistan-widget-sound:hover{ background:rgba(0,0,0,.75); transform: scale(1.08); }
  .asistan-widget-baslik{ font-size:.74rem; font-weight:800; color:var(--navy); margin:2px 4px 6px; }
  .asistan-widget-video{
    position:relative; padding-bottom:56.25%; height:0; border-radius:10px; overflow:hidden; background:#0B1220;
  }
  .asistan-widget-video iframe, .asistan-widget-video video{
    position:absolute; inset:0; width:100%; height:100%; border:0;
  }
  .asistan-widget-kucuk{ width:160px; }
  .asistan-widget-orta{ width:220px; }
  .asistan-widget-buyuk{ width:300px; }
  @media (max-width:480px){
    .asistan-widget{ width:170px; left:12px; bottom:12px; }
    .asistan-widget-buyuk{ width:200px; }
  }

  /* ---------- ayrılırken uğurlama pop-up'ı ---------- */
  .exit-popup-overlay{
    position:fixed; inset:0; z-index:200; background:rgba(22,35,61,.72);
    display:flex; align-items:center; justify-content:center; padding:20px;
    opacity:0; visibility:hidden; transition:opacity .25s, visibility .25s;
  }
  .exit-popup-overlay.open{ opacity:1; visibility:visible; }
  .exit-popup-box{
    position:relative; background:#fff; border-radius:20px; padding:24px; max-width:400px; width:100%;
    text-align:center; box-shadow:0 30px 60px rgba(0,0,0,.35);
    transform: scale(.9); transition: transform .25s;
  }
  .exit-popup-overlay.open .exit-popup-box{ transform: scale(1); }
  .exit-popup-close{
    position:absolute; top:-12px; right:-12px; width:30px; height:30px; border-radius:50%;
    border:none; background:var(--navy); color:#fff; cursor:pointer; font-size:.85rem;
    box-shadow:0 4px 10px rgba(0,0,0,.3);
  }
  .exit-popup-video{
    position:relative; padding-bottom:56.25%; height:0; border-radius:14px; overflow:hidden; background:#0B1220; margin-bottom:16px;
  }
  .exit-popup-video iframe, .exit-popup-video video{ position:absolute; inset:0; width:100%; height:100%; border:0; }
  .exit-popup-baslik{ font-family:'Baloo 2'; font-weight:700; font-size:1.15rem; color:var(--navy); }
  .reminder-popup-return-btn{
    margin-top:16px; border:none; border-radius:999px; padding:11px 26px; font-weight:800; font-size:.85rem;
    cursor:pointer; font-family:'Nunito'; background: linear-gradient(135deg, var(--sky), #29A9DC); color:#fff;
  }

  /* ---------- yüzen butonlar: yukarı kaydır + destek ---------- */
  .float-stack{
    position:fixed; right:22px; bottom:22px; z-index:80;
    display:flex; flex-direction:column; gap:12px; align-items:center;
  }
  .float-btn{
    width:52px; height:52px; border-radius:50%; border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:center; font-size:1.3rem;
    box-shadow:0 8px 20px rgba(22,35,61,.25); transition: transform .2s;
  }
  .float-btn:hover{ transform: translateY(-3px) scale(1.05); }
  .chat-btn{ background: linear-gradient(135deg, var(--sky), #29A9DC); color:#fff; }
  .scrolltop-btn{ background:#fff; color:var(--navy); }

  /* ---------- canlı destek paneli ---------- */
  .chat-panel{
    position:fixed; right:22px; bottom:88px; z-index:90; width:340px; max-width:calc(100vw - 32px);
    height:460px; max-height:calc(100vh - 120px);
    background:#fff; border-radius:20px; box-shadow:0 20px 44px rgba(22,35,61,.3);
    overflow:hidden; opacity:0; visibility:hidden; transform: translateY(16px);
    transition: opacity .2s, transform .2s, visibility .2s;
    display:flex; flex-direction:column;
  }
  .chat-panel.open{ opacity:1; visibility:visible; transform: translateY(0); }
  .chat-panel-head{
    background: linear-gradient(135deg, var(--sky), #29A9DC); color:#fff; padding:14px 16px;
    display:flex; align-items:center; justify-content:space-between; flex-shrink:0;
  }
  .chat-panel-head strong{ font-family:'Baloo 2'; font-size:1rem; display:block; }
  .chat-status{ font-size:.72rem; font-weight:700; opacity:.9; }
  .chat-status.online{ color:#DFF7E6; }
  .chat-status.offline{ color:#FFE1D6; }
  .chat-close{
    border:none; background:rgba(255,255,255,.2); color:#fff; width:26px; height:26px; border-radius:50%;
    cursor:pointer; font-size:.85rem;
  }
  .chat-panel-body{ padding:14px 16px; flex:1; overflow-y:auto; display:flex; flex-direction:column; min-height:0; }
  .chat-intro{ font-size:.82rem; color:#5A6B87; font-weight:600; margin:0 0 12px; line-height:1.5; }
  .chat-thread{ display:flex; flex-direction:column; gap:8px; flex:1; }
  .chat-bubble{
    max-width:82%; padding:9px 13px; border-radius:14px; font-size:.85rem; line-height:1.5;
    word-wrap:break-word; position:relative;
  }
  .chat-bubble.me{
    align-self:flex-end; background: linear-gradient(135deg, var(--sky), #29A9DC); color:#fff;
    border-bottom-right-radius:4px;
  }
  .chat-bubble.support{
    align-self:flex-start; background:#F0F3F8; color:#3A4A66; border-bottom-left-radius:4px;
  }
  .chat-bubble-time{ display:block; font-size:.62rem; opacity:.75; margin-top:3px; text-align:right; }
  .chat-error{ color:#E85F41; font-size:.76rem; font-weight:700; margin-top:8px; min-height:14px; }

  .chat-session-banner{
    border-radius:12px; padding:10px 14px; font-size:.8rem; font-weight:700; margin-bottom:10px; text-align:center;
  }
  .chat-session-banner.hold{ background:#FFF3D2; color:#B9860B; }
  .chat-session-banner.closed{ background:#FFEAE4; color:#E85F41; }
  .chat-new-session-btn{
    margin-top:8px; border:none; background:#E85F41; color:#fff; font-weight:800; font-size:.76rem;
    padding:7px 16px; border-radius:999px; cursor:pointer; font-family:'Nunito';
  }

  .chat-panel-footer{
    flex-shrink:0; border-top:1px solid #EEF2F7; padding:10px 12px; background:#fff;
  }
  .chat-input{
    width:100%; box-sizing:border-box; border:2px solid #E3ECF5; border-radius:10px; padding:9px 12px;
    font-family:'Nunito'; font-size:.85rem; resize:none;
  }
  .chat-input:focus{ border-color: var(--sky); outline:none; }
  .chat-input-name{ margin-bottom:8px; }
  .chat-input-row{ display:flex; align-items:flex-end; gap:8px; }
  .chat-input-row .chat-input{ max-height:90px; }
  .chat-send-btn{
    flex-shrink:0; width:38px; height:38px; border-radius:50%; border:none; cursor:pointer;
    background: linear-gradient(135deg, var(--sky), #29A9DC); color:#fff; font-size:1rem;
    display:flex; align-items:center; justify-content:center;
  }
  .chat-send-btn:disabled{ opacity:.6; cursor:default; }

  @media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }

  /* ---------- nav user dropdown / guest login ---------- */
  .user-greet{ font-weight:800; font-size:.88rem; color:var(--navy); white-space:nowrap; }
  .user-box-guest{
    display:flex; align-items:center; gap:10px; text-decoration:none;
    background:#fff; border-radius:999px; padding:5px 16px 5px 5px;
    box-shadow:0 4px 12px rgba(22,35,61,.1); transition: transform .15s, box-shadow .15s;
  }
  .user-box-guest:hover{ transform: translateY(-2px); box-shadow:0 8px 18px rgba(22,35,61,.16); }
  .user-login-label{ font-weight:800; font-size:.85rem; color:var(--navy); }
  .user-box-guest .avatar{ width:36px; height:36px; }

  .user-dropdown{ position:relative; }
  .user-dropdown-toggle{
    display:flex; align-items:center; gap:9px; border:none; background:#fff; cursor:pointer;
    border-radius:999px; padding:5px 12px 5px 5px; box-shadow:0 4px 12px rgba(22,35,61,.1);
    transition: transform .15s, box-shadow .15s; font-family:'Nunito';
  }
  .user-dropdown-toggle:hover{ transform: translateY(-2px); box-shadow:0 8px 18px rgba(22,35,61,.16); }
  .user-dropdown-toggle .chevron{
    font-size:.7rem; color:#93A2B8; transition: transform .2s; margin-left:-2px;
  }
  .user-dropdown.open .user-dropdown-toggle .chevron{ transform: rotate(180deg); }
  .user-dropdown-menu{
    position:absolute; right:0; top:calc(100% + 10px); min-width:190px;
    background:#fff; border-radius:16px; box-shadow:0 14px 30px rgba(22,35,61,.18);
    overflow:hidden; opacity:0; visibility:hidden; transform: translateY(-6px);
    transition: opacity .15s, transform .15s, visibility .15s; z-index:60;
  }
  .user-dropdown.open .user-dropdown-menu{ opacity:1; visibility:visible; transform: translateY(0); }
  .user-dropdown:hover .user-dropdown-toggle .chevron{ transform: rotate(180deg); }
  .user-dropdown:hover .user-dropdown-menu{ opacity:1; visibility:visible; transform: translateY(0); }
  .user-dropdown-menu::before{
    content:''; position:absolute; top:-10px; left:0; right:0; height:10px;
  }
  .user-dropdown-menu a{
    display:flex; align-items:center; gap:8px; padding:12px 16px; font-weight:700; font-size:.85rem;
    color:var(--navy); text-decoration:none; transition: background .15s;
  }
  .user-dropdown-menu a:hover{ background: var(--sky-light); }
  .user-dropdown-menu a.user-dropdown-logout{ color:var(--coral); }
  .user-dropdown-menu a.user-dropdown-logout:hover{ background:#FFF0EC; }
  .user-dropdown-divider{ height:1px; background:#EEF2F7; margin:4px 0; }

  /* ---------- welcome banner ---------- */
  .welcome-banner-wrap{ position:relative; z-index:1; padding: 18px 4vw 0; }
  .welcome-banner{
    background: linear-gradient(135deg, var(--grass), var(--grass-deep));
    color:#fff; font-weight:800; text-align:center; padding:14px 20px; border-radius:16px;
    box-shadow: 0 8px 18px rgba(76,175,61,.25);
  }

  /* ---------- auth pages (login / register) ---------- */
  .auth-card{
    background:#fff; border-radius: var(--radius-lg); padding: 34px 32px;
    box-shadow: 0 14px 34px rgba(22,35,61,.18); width:100%; max-width:400px; margin: 40px auto;
  }
  .auth-brand{ display:flex; align-items:center; gap:14px; margin-bottom:20px; }
  .auth-tag{
    display:block; margin-top:2px; font-size:.68rem; font-weight:800; color: var(--sky);
    letter-spacing:.4px;
  }
  .auth-card h2{ margin:0 0 6px; font-size:1.25rem; color: var(--navy); }
  .auth-sub{ margin:0 0 20px; color:#5A6B87; font-weight:600; font-size:.88rem; line-height:1.5; }
  .auth-field{ margin-bottom:14px; }
  .auth-field label{ display:block; font-weight:800; font-size:.8rem; color:var(--navy); margin-bottom:6px; }
  .auth-field input{
    width:100%; border:2px solid #E3ECF5; border-radius:12px; padding:11px 14px;
    font-family:'Nunito'; font-size:.9rem; outline:none; transition:border-color .2s; box-sizing:border-box;
  }
  .auth-field input:focus{ border-color: var(--sky); }
  .auth-btn{
    width:100%; border:none; border-radius:14px; padding:13px 20px; font-family:'Baloo 2';
    font-weight:700; font-size:1rem; cursor:pointer; color:#fff; margin-top:4px;
    background: linear-gradient(135deg, var(--sky), #29A9DC);
    box-shadow: 0 8px 18px rgba(53,192,242,.3); transition: transform .15s;
  }
  .auth-btn:hover{ transform: translateY(-2px); }
  .auth-error{
    background:#FFEAE4; color:#E85F41; font-weight:700; font-size:.84rem;
    padding:11px 14px; border-radius:12px; margin-bottom:16px;
  }
  .member-stats{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
  .member-stat-chip{
    flex:1; min-width:78px; display:flex; align-items:center; gap:7px;
    background: var(--sky-light); border-radius:12px; padding:8px 10px;
  }
  .member-stat-chip .circ{
    width:22px; height:22px; border-radius:50%; flex-shrink:0;
    background: linear-gradient(180deg, #BFE9FB 0%, #8FD8F5 55%, #6FCF56 55%, #4CAF3D 100%);
  }
  .member-stat-chip .num{ font-family:'Baloo 2'; font-weight:800; font-size:1rem; color:var(--navy); line-height:1.1; }
  .member-stat-chip .lbl{ font-size:.66rem; font-weight:700; color:#6E7D97; }
  .auth-switch{ text-align:center; margin:18px 0 0; font-size:.85rem; font-weight:600; color:#6E7D97; }
  .auth-switch a{ color: var(--sky); font-weight:800; }
  .auth-back{
    display:block; text-align:center; margin-top:14px; font-size:.82rem; font-weight:800;
    color:#93A2B8; text-decoration:none;
  }

  /* ---------- oyunlar: puan / skor tablosu ---------- */
  .game-points-box{
    display:flex; gap:20px; flex-wrap:wrap; background: linear-gradient(135deg, #EFE7FF, #FFE9DE);
    border-radius:18px; padding:18px 22px; margin:18px 0 22px;
  }
  .game-points-left, .game-points-right{ flex:1; min-width:220px; }
  .game-points-lbl{ display:block; font-weight:800; font-size:.82rem; color:var(--navy); margin-bottom:8px; }
  .game-points-num{ font-family:'Baloo 2'; font-weight:800; font-size:2.2rem; color:#7B4FE0; line-height:1; }
  .game-points-guest{ font-size:.85rem; font-weight:600; color:#5A6B87; }
  .game-points-guest a{ color: var(--sky); font-weight:800; }
  .points-mini-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
  .points-mini-list li{
    display:flex; justify-content:space-between; font-size:.82rem; font-weight:700; color:#3A4A66;
    background:rgba(255,255,255,.6); padding:5px 10px; border-radius:8px;
  }
  .points-mini-list li b{ color:#7B4FE0; }

  .score-table-wrap{ overflow-x:auto; border-radius:14px; }
  .score-table{ width:100%; border-collapse:collapse; font-size:.85rem; }
  .score-table th{
    text-align:left; padding:10px 12px; background: var(--sky-light); color:var(--navy);
    font-weight:800; font-size:.76rem; text-transform:uppercase; letter-spacing:.3px;
  }
  .score-table th:first-child{ border-radius:10px 0 0 10px; }
  .score-table th:last-child{ border-radius:0 10px 10px 0; }
  .score-table td{ padding:9px 12px; border-bottom:1px solid #EEF2F7; color:#3A4A66; font-weight:600; }
  .score-table tr:last-child td{ border-bottom:none; }

  /* ---------- boyama: interaktif renklendirme ---------- */
  .coloring-wrap{ display:flex; gap:22px; flex-wrap:wrap; align-items:flex-start; margin-bottom:22px; }
  .coloring-canvas-box{
    flex:2; min-width:280px; background:#fff; border-radius:18px; padding:14px;
    box-shadow:0 8px 20px rgba(22,35,61,.1); text-align:center;
  }
  .coloring-zoom-row{
    display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:12px;
  }
  .zoom-btn{
    border:2px solid #E3ECF5; background:#fff; color:var(--navy); font-weight:800; font-size:.85rem;
    width:32px; height:32px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center;
    transition: transform .15s, border-color .2s;
  }
  .zoom-btn:hover{ transform: scale(1.08); border-color: var(--sky); }
  .zoom-btn.zoom-reset{ width:auto; border-radius:999px; padding:0 14px; font-size:.72rem; }
  #zoomLevelLabel{ font-size:.8rem; font-weight:800; color:#4C5C78; min-width:44px; }
  .coloring-canvas-scroll{
    overflow:auto; max-width:100%; max-height:520px; border-radius:12px;
    display:flex; justify-content:center;
  }
  .coloring-canvas-box canvas{
    height:auto; border-radius:12px; cursor:crosshair; touch-action:none;
    background:#fff; box-shadow:0 0 0 2px #EEF2F7; flex-shrink:0;
  }
  .coloring-side{ flex:1; min-width:220px; display:flex; flex-direction:column; gap:14px; }
  .coloring-palette{
    background:#fff; border-radius:18px; padding:16px; box-shadow:0 8px 20px rgba(22,35,61,.1);
  }
  .coloring-palette h4{ margin:0 0 10px; font-size:.9rem; color:var(--navy); }
  .coloring-tools{ display:flex; flex-wrap:wrap; gap:8px; }
  .tool-btn{
    border:2px solid #E3ECF5; background:#fff; color:#4C5C78; font-family:'Nunito';
    font-weight:800; font-size:.8rem; padding:8px 14px; border-radius:12px; cursor:pointer;
    transition: transform .15s, border-color .2s, background .2s;
  }
  .tool-btn:hover{ transform: translateY(-1px); }
  .tool-btn.active{ background: var(--sky); border-color: var(--sky); color:#fff; }
  .brush-size-row{
    display:flex; align-items:center; gap:8px; margin-top:12px; font-size:.78rem; font-weight:700; color:#4C5C78;
  }
  .brush-size-row input[type="range"]{ flex:1; accent-color: var(--sky); }
  .brush-size-row span{ min-width:38px; text-align:right; }
  .coloring-swatches{ display:flex; flex-wrap:wrap; gap:8px; }
  .coloring-swatch{
    width:30px; height:30px; border-radius:50%; cursor:pointer; border:3px solid #fff;
    box-shadow:0 0 0 2px #E3ECF5; transition: transform .15s, box-shadow .15s;
  }
  .coloring-swatch:hover{ transform: scale(1.12); }
  .coloring-swatch.active{ box-shadow:0 0 0 3px var(--navy); transform: scale(1.15); }
  .coloring-actions{ display:flex; gap:10px; flex-wrap:wrap; }
  .coloring-btn{
    flex:1; border:none; border-radius:12px; padding:10px 14px; font-weight:800; font-size:.82rem;
    cursor:pointer; font-family:'Nunito'; transition: transform .15s;
  }
  .coloring-btn:hover{ transform: translateY(-2px); }
  .coloring-btn.reset{ background:#EDF1F6; color:#4C5C78; }
  .coloring-btn.download{ background: linear-gradient(135deg, var(--grass), var(--grass-deep)); color:#fff; }

  /* ================= MOBİL UYUM (RESPONSIVE) ================= */

  /* Genel güvenlik: hiçbir öge görünür genişliği aşmasın */
  img, video, iframe, svg{ max-width:100%; }
  input, select, textarea, button{ max-width:100%; }
  table{ display:block; overflow-x:auto; max-width:100%; }

  @media (max-width: 900px){
    .contact-grid{ grid-template-columns: 1fr; }
  }

  @media (max-width: 700px){
    header.top{ padding: 14px 4vw 20px; }
    .topbar{ flex-wrap:wrap; gap:10px 16px; margin-bottom:14px; justify-content:center; }

    .hero-row{ gap:16px; justify-content:center; text-align:center; }
    .brandblock{ gap:14px; }
    .logo{ width:76px; height:76px; }
    .logo .cloud.c1{ width:22px; height:22px; top:13px; left:13px; }
    .logo .cloud.c2{ width:16px; height:16px; top:17px; left:29px; }
    .logo .cloud.c3{ width:13px; height:13px; top:10px; left:37px; }
    .brand-text h1{ font-size:1.7rem; }
    .brand-text p{ font-size:.82rem; }

    .best-badge{ padding:10px 16px; gap:10px; }
    .best-badge .label{ font-size:.82rem; }
    .stars{ gap:5px; }
    .stars .star{ width:26px; height:26px; font-size:.56rem; }

    .navwrap{ padding: 0 4vw; }
    nav.menubar{ padding:12px 16px; gap:10px; justify-content:center; }
    .menubar .links{ gap:12px 16px; justify-content:center; width:100%; }
    .menubar .links a{ font-size:.86rem; }

    .user-dropdown-toggle .user-greet{ display:none; }
    .user-dropdown-menu{ right:auto; left:50%; transform: translate(-50%,-6px); }
    .user-dropdown.open .user-dropdown-menu,
    .user-dropdown:hover .user-dropdown-menu{ transform: translate(-50%,0); }

    .layout{ padding: 24px 4vw 40px; gap:18px; }
    aside.menuler{ position:static; }

    .page-hero{ padding:22px; text-align:center; justify-content:center; }
    .page-hero h2{ font-size:1.5rem; }
    .page-hero p{ max-width:100%; }
    .page-hero .icon{ font-size:2.4rem; }

    .card-grid.cols-3{ grid-template-columns: 1fr 1fr; }

    .welcome-banner-wrap{ padding: 14px 4vw 0; }
    .welcome-banner{ font-size:.88rem; padding:12px 16px; }

    aside.menuler .sidebar-social-icons a{ width:32px; height:32px; }
  }

  @media (max-width: 480px){
    .brand-text h1{ font-size:1.4rem; }
    .brand-text p{ font-size:.76rem; }
    .logo{ width:64px; height:64px; }
    .best-badge{ width:100%; justify-content:center; }
    .best-badge .label{ display:none; }
    .stars .star{ width:24px; height:24px; }

    .menubar .links{ gap:10px 14px; }
    .menubar .links a{ font-size:.8rem; }

    .card-grid, .card-grid.cols-3{ grid-template-columns: 1fr; }

    .auth-card{ padding:24px 20px; margin: 24px auto; }
    .contact-info .item{ flex-direction:column; text-align:center; align-items:center; gap:6px; }
  }