/* =========================================================
   Klinik AI — tasarım sistemi
   Dil: derin mürekkep + tek vurgu (klinik güveni, kurumsal)
   ========================================================= */
:root{
  /* Zemin: steril beyaz + çok hafif mavi-gri ayrım */
  --zemin:#ffffff;
  --zemin2:#f4f8fb;
  --kart:#ffffff;
  --kart2:#f8fbfd;
  --cizgi:#e3ebf2;
  --cizgi2:#cdd9e5;

  /* Metin: siyah değil, koyu lacivert — kurumsal ve yumuşak */
  --metin:#12283f;
  --soluk:#54708a;
  --soluk2:#8298ab;

  /* Ana renk: sağlık sektörünün güven mavisi */
  --vurgu:#0a6cb4;
  --vurgu-koyu:#075490;
  --vurgu-acik:#e8f2fa;

  /* İkincil aksan: klinik turkuazı (grafik ve ikonlarda) */
  --aksan:#0e9c8a;
  --aksan-acik:#e6f6f3;

  --sari:#b8860b;
  --kirmizi:#c0392b;
  --yesil:#1f8b4c;
  --mavi:#0a6cb4;

  --r:12px;
  --r-s:8px;
  --golge:0 8px 24px -10px rgba(18,40,63,.16);
  --golge-hafif:0 2px 8px rgba(18,40,63,.06);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{
  background:var(--zemin);color:var(--metin);
  font:15.5px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:var(--vurgu);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{line-height:1.22;margin:0 0 .5em;letter-spacing:-.018em;font-weight:620}
h1{font-size:clamp(26px,3.3vw,40px)}
h2{font-size:clamp(20px,2.2vw,27px)}
h3{font-size:17px;letter-spacing:-.012em}
p{margin:0 0 1em}
small{color:var(--soluk)}
::selection{background:rgba(10,108,180,.16)}

/* ---------- Üst bar ---------- */
.ust{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 30px;border-bottom:1px solid var(--cizgi);
  background:rgba(255,255,255,.88);backdrop-filter:blur(14px);
  position:sticky;top:0;z-index:60;
}
.marka{color:var(--metin);font-size:18px;font-weight:680;display:flex;align-items:center;
  gap:10px;letter-spacing:-.02em}
.marka:hover{text-decoration:none}
.marka b{color:var(--vurgu);font-weight:750;margin-inline-start:.3em}
.marka-nokta{width:9px;height:9px;border-radius:50%;background:var(--vurgu);
  box-shadow:0 0 0 4px rgba(10,108,180,.16);animation:nabiz 2.6s ease-in-out infinite}
@keyframes nabiz{0%,100%{box-shadow:0 0 0 4px rgba(10,108,180,.16)}
  50%{box-shadow:0 0 0 9px rgba(10,108,180,.04)}}
.ust nav{display:flex;align-items:center;gap:22px;font-size:14.5px}
.ust nav a{color:var(--soluk)}
.ust nav a:hover{color:var(--metin);text-decoration:none}
.ust nav .gizle-mobil{display:inline}
.kim{color:var(--soluk);font-size:13px;padding-left:8px;border-left:1px solid var(--cizgi)}

/* ---------- Kaplar ---------- */
.kap{max-width:1200px;margin:0 auto;padding:30px}
.kap-genis{max-width:1400px;margin:0 auto;padding:30px}
.dar{max-width:440px;margin:60px auto;padding:0 22px}
.bolum{padding:54px 30px;max-width:1200px;margin:0 auto}
.bolum-basI{max-width:660px;margin:0 0 30px}
.bolum-basI p{color:var(--soluk);font-size:16px;margin:0}
.alt{border-top:1px solid var(--cizgi);margin-top:60px;background:var(--zemin2)}
.alt-ic{max-width:1200px;margin:0 auto;padding:44px 30px;display:grid;
  grid-template-columns:1.7fr 1fr 1fr 1.1fr;gap:32px}
.alt h4{font-size:13px;text-transform:uppercase;letter-spacing:.09em;color:var(--soluk2);
  font-weight:600;margin-bottom:14px}
.alt a{display:block;color:var(--soluk);font-size:14.5px;padding:4px 0}
.alt-kunye{border-top:1px solid var(--cizgi);padding:20px 30px;text-align:center;
  color:var(--soluk2);font-size:13px}
.alt-kunye b{color:var(--soluk);font-weight:600}

/* ---------- Uyarılar ---------- */
.uyarilar{max-width:1200px;margin:16px auto 0;padding:0 30px}
.uyari{padding:12px 16px;border-radius:var(--r-s);margin-bottom:9px;font-size:14.5px}
.uyari.ok{background:#eaf7f0;border:1px solid #b7e2c9;color:#16603a}
.uyari.hata{background:#fdeeed;border:1px solid #f3c3c0;color:#96271e}

/* ---------- Düğmeler ---------- */
.dugme{
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
  background:var(--vurgu);color:#ffffff;font-weight:670;
  padding:13px 24px;border-radius:var(--r-s);border:0;cursor:pointer;font-size:15.5px;
  transition:transform .14s ease,box-shadow .14s ease,background .14s ease;
  box-shadow:0 8px 26px -10px rgba(10,108,180,.6);font-family:inherit;
}
.dugme:hover{background:#48e6d6;text-decoration:none;transform:translateY(-1px);
  box-shadow:0 12px 32px -10px rgba(10,108,180,.75)}
.dugme:active{transform:translateY(0)}
.dugme.kucuk{padding:8px 15px;font-size:13.5px;box-shadow:none}
.dugme.hayalet{background:transparent;color:var(--metin);border:1px solid var(--cizgi2);
  box-shadow:none}
.dugme.hayalet:hover{background:var(--kart2);border-color:var(--soluk2)}
.dugme.tehlike{background:transparent;color:var(--kirmizi);
  border:1px solid rgba(242,97,92,.38);box-shadow:none}
.dugme.tehlike:hover{background:rgba(242,97,92,.12)}
.dugme.tam{width:100%}
.dugme:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}

/* ---------- Form ---------- */
label{display:block;font-size:13px;color:var(--soluk);margin:15px 0 6px;font-weight:500}
input[type=text],input[type=email],input[type=password],input[type=number],select,textarea{
  width:100%;background:var(--zemin);border:1px solid var(--cizgi);color:var(--metin);
  border-radius:var(--r-s);padding:11px 13px;font:inherit;font-size:14.5px;
  transition:border-color .14s ease,box-shadow .14s ease;
}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--vurgu-koyu);
  box-shadow:0 0 0 3px rgba(10,108,180,.11)}
textarea{min-height:92px;resize:vertical}
.ikili{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.onay{display:flex;align-items:center;gap:9px;color:var(--metin);font-size:14.5px;margin:11px 0;
  cursor:pointer}
.onay input{width:auto;margin:0;accent-color:var(--vurgu)}

/* ---------- Kart ---------- */
.kart{background:var(--kart);border:1px solid var(--cizgi);border-radius:var(--r);padding:24px}
.kart + .kart{margin-top:20px}
.kart h2{margin-bottom:16px}
.kart-basI{display:flex;align-items:center;justify-content:space-between;
  gap:14px;margin-bottom:16px;flex-wrap:wrap}
.kart-basI h2,.kart-basI h3{margin:0}

/* =========================================================
   KAHRAMAN (landing hero)
   ========================================================= */
.kahraman{position:relative;padding:58px 30px 46px;overflow:hidden}
.kahraman-ic{max-width:1200px;margin:0 auto;display:grid;
  grid-template-columns:1.08fr .92fr;gap:56px;align-items:center}
.kahraman-isik{
  position:absolute;inset:-30% -10% auto -10%;height:760px;pointer-events:none;z-index:0;
  background:
    radial-gradient(46% 40% at 22% 30%,rgba(10,108,180,.07),transparent 68%),
    radial-gradient(40% 38% at 78% 22%,rgba(14,156,138,.08),transparent 66%),
    radial-gradient(34% 34% at 52% 62%,rgba(10,108,180,.09),transparent 70%);
  filter:blur(24px);animation:kay 22s ease-in-out infinite alternate;
}
@keyframes kay{from{transform:translate3d(-2%,-1%,0) scale(1)}
  to{transform:translate3d(3%,2%,0) scale(1.08)}}
.kahraman-izgara{position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.4;
  background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(72% 58% at 50% 34%,#000 20%,transparent 100%);
  -webkit-mask-image:radial-gradient(72% 58% at 50% 34%,#000 20%,transparent 100%)}
.kahraman-metin{position:relative;z-index:1}
.kahraman h1{margin-bottom:22px}
.kahraman h1 em{font-style:normal;color:var(--vurgu);text-shadow:none}
.kahraman .buyuk{font-size:16.5px;color:var(--soluk);max-width:560px;margin-bottom:30px}
.kahraman-dugmeler{display:flex;gap:13px;flex-wrap:wrap;align-items:center}
.rozet{display:inline-flex;align-items:center;gap:9px;background:rgba(10,108,180,.07);
  border:1px solid rgba(10,108,180,.24);color:var(--vurgu);font-size:13px;
  padding:7px 15px;border-radius:99px;margin-bottom:24px;font-weight:560;
  letter-spacing:.01em}
.rozet i{width:6px;height:6px;border-radius:50%;background:var(--vurgu);display:block;
  animation:nabiz2 2s ease-in-out infinite}
@keyframes nabiz2{0%,100%{opacity:1}50%{opacity:.25}}
.mini-guven{display:flex;gap:22px;margin-top:30px;flex-wrap:wrap;
  color:var(--soluk2);font-size:13.5px}
.mini-guven span{display:flex;align-items:center;gap:7px}
.mini-guven b{color:var(--soluk);font-weight:560}

/* ---------- Telefon (canlı demo) ---------- */
.telefon-sar{position:relative;z-index:1;display:flex;justify-content:center}
.telefon{
  width:100%;max-width:378px;background:var(--zemin2);border:1px solid var(--cizgi2);
  border-radius:30px;padding:11px;box-shadow:var(--golge);position:relative;
}
.telefon::before{content:"";position:absolute;top:20px;left:50%;transform:translateX(-50%);
  width:96px;height:5px;border-radius:99px;background:var(--cizgi);z-index:3}
.telefon-ic{background:#eef2f6;border-radius:22px;overflow:hidden;display:flex;
  flex-direction:column;height:520px}
.telefon-ust{background:var(--kart2);padding:24px 16px 12px;border-bottom:1px solid var(--cizgi);
  display:flex;align-items:center;gap:11px}
.telefon-avatar{width:36px;height:36px;border-radius:50%;
  background:linear-gradient(140deg,var(--vurgu),var(--vurgu-koyu));
  display:flex;align-items:center;justify-content:center;color:#ffffff;font-weight:750;
  font-size:14px;flex:0 0 auto}
.telefon-ust b{display:block;font-size:14.5px;line-height:1.3}
.telefon-ust small{font-size:11.5px;color:var(--vurgu)}
.telefon-govde{flex:1;overflow-y:auto;padding:16px 14px;display:flex;
  flex-direction:column;gap:9px;scroll-behavior:smooth}
.telefon-govde::-webkit-scrollbar{width:0}
.telefon-alt{padding:11px 12px;border-top:1px solid var(--cizgi);display:flex;gap:8px;
  background:var(--kart2)}
.telefon-alt input{flex:1;background:var(--zemin2);border-radius:99px;padding:10px 15px;
  font-size:14px;border-color:transparent}
.telefon-alt button{background:var(--vurgu);border:0;border-radius:50%;width:40px;height:40px;
  cursor:pointer;color:#ffffff;font-size:16px;flex:0 0 auto;font-weight:700}
.telefon-alt button:disabled{opacity:.4}
.bal{max-width:82%;padding:9px 13px;border-radius:15px;font-size:14.2px;line-height:1.5;
  animation:gel .3s ease;white-space:pre-wrap;word-break:break-word}
@keyframes gel{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.bal.hasta{background:#ffffff;border:1px solid var(--cizgi);align-self:flex-end;
  border-bottom-right-radius:5px;box-shadow:0 1px 2px rgba(18,40,63,.05)}
.bal.ai{background:var(--vurgu-acik);border:1px solid rgba(10,108,180,.18);
  align-self:flex-start;border-bottom-left-radius:5px}
.bal.sis{align-self:center;background:transparent;color:var(--soluk2);font-size:12px;
  text-align:center;max-width:96%}
.yaziyor{display:flex;gap:4px;padding:12px 14px;align-self:flex-start}
.yaziyor i{width:6px;height:6px;border-radius:50%;background:var(--soluk2);display:block;
  animation:zipla 1.3s ease-in-out infinite}
.yaziyor i:nth-child(2){animation-delay:.18s}
.yaziyor i:nth-child(3){animation-delay:.36s}
@keyframes zipla{0%,60%,100%{transform:translateY(0);opacity:.4}
  30%{transform:translateY(-5px);opacity:1}}
.demo-oneri{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px;justify-content:center}
.demo-oneri button{background:var(--kart2);border:1px solid var(--cizgi2);color:var(--soluk);
  border-radius:99px;padding:6px 13px;font-size:12.5px;cursor:pointer;font-family:inherit;
  transition:all .14s ease}
.demo-oneri button:hover{border-color:var(--vurgu-koyu);color:var(--metin)}

/* ---------- Sayı bandı ---------- */
.band{border-block:1px solid var(--cizgi);background:var(--zemin2)}
.band-ic{max-width:1200px;margin:0 auto;padding:34px 30px;display:grid;
  grid-template-columns:repeat(4,1fr);gap:26px}
.band-ic > div{text-align:center}
.band b{display:block;font-size:31px;color:var(--metin);letter-spacing:-.03em;
  font-weight:680;line-height:1.15}
.band b em{font-style:normal;color:var(--vurgu)}
.band span{font-size:13.5px;color:var(--soluk2);display:block;margin-top:3px}

/* ---------- Özellik ızgarası ---------- */
.izgara{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.izgara-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.ozellik{background:var(--kart);border:1px solid var(--cizgi);border-radius:var(--r);
  padding:26px;transition:border-color .2s ease,transform .2s ease}
.ozellik:hover{border-color:var(--cizgi2);transform:translateY(-2px)}
.ozellik .ik{width:40px;height:40px;border-radius:11px;background:rgba(10,108,180,.1);
  border:1px solid rgba(10,108,180,.2);display:flex;align-items:center;
  justify-content:center;font-size:18px;margin-bottom:15px}
.ozellik h3{margin-bottom:7px}
.ozellik p{color:var(--soluk);font-size:14.8px;margin:0}

/* ---------- Akış şeması ---------- */
.akis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:14px}
.akis-adim{background:var(--kart);border:1px solid var(--cizgi);border-radius:var(--r);
  padding:22px;position:relative}
.akis-adim::after{content:"→";position:absolute;right:-13px;top:50%;transform:translateY(-50%);
  color:var(--cizgi2);font-size:19px;z-index:2}
.akis-adim:last-child::after{display:none}
.akis-no{width:26px;height:26px;border-radius:8px;background:var(--vurgu);color:#ffffff;
  display:flex;align-items:center;justify-content:center;font-weight:730;font-size:13px;
  margin-bottom:13px}
.akis-adim h3{font-size:16px;margin-bottom:6px}
.akis-adim p{color:var(--soluk);font-size:14px;margin:0}

/* ---------- Funnel şeridi ---------- */
.serit{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));
  gap:8px;padding:4px 0 10px}
.serit-adim{min-width:0;background:var(--kart);
  border:1px solid var(--cizgi);border-radius:11px;padding:14px 12px;text-align:center}
.serit-adim b{display:block;font-size:13.5px;margin-bottom:3px;
  hyphens:auto;overflow-wrap:anywhere}
.serit-adim span{font-size:11.5px;color:var(--soluk2)}

/* ---------- Fiyatlandırma ---------- */
.fiyat-izgara{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:820px}
.fiyat{background:var(--kart);border:1px solid var(--cizgi);border-radius:var(--r);padding:30px;
  position:relative}
.fiyat.one-cikan{border-color:rgba(10,108,180,.4);
  box-shadow:0 0 0 1px rgba(10,108,180,.14),0 22px 50px -26px rgba(10,108,180,.34)}
.fiyat-etiket{position:absolute;top:-11px;right:22px;background:var(--vurgu);color:#ffffff;
  font-size:11.5px;font-weight:700;padding:4px 12px;border-radius:99px;letter-spacing:.02em}
.fiyat h3{font-size:15px;color:var(--soluk);font-weight:560;letter-spacing:0;margin-bottom:8px}
.fiyat .tutar{font-size:38px;font-weight:680;letter-spacing:-.035em;line-height:1}
.fiyat .tutar small{font-size:15px;color:var(--soluk);font-weight:400;letter-spacing:0}
.fiyat ul{list-style:none;padding:0;margin:20px 0 0}
.fiyat li{padding:8px 0;border-top:1px solid var(--cizgi);font-size:14.5px;
  color:var(--soluk);display:flex;gap:9px}
.fiyat li::before{content:"✓";color:var(--vurgu);font-weight:700;flex:0 0 auto}

/* ---------- İllüstrasyon kutusu ---------- */
/* Görsel bölümleri eşit iki sütun ister; .ikili-kolon (1fr 330px) görseli eziyor */
.ikili-esit{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.cizim-kutu{background:var(--kart);border:1px solid var(--cizgi);border-radius:var(--r);
  padding:24px;display:flex;align-items:center;justify-content:center}
.cizim-kutu.genis{padding:34px 24px}
.cizim-kutu.genis .cizim{max-width:760px}
.cizim{width:100%;height:auto;display:block}
.rozet-svg{width:40px;height:40px;display:block}
.alan-ikon{width:40px;height:40px;display:block;margin-bottom:15px}
.ozellik.alan .rozet-svg{margin-bottom:15px}

/* ---------- 4'lü ızgara ---------- */
.izgara-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}

/* ---------- Madde listesi ---------- */
.madde{list-style:none;padding:0;margin:18px 0 0}
.madde li{position:relative;padding:0 0 14px 26px;color:var(--soluk);font-size:15.5px}
.madde li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:9px;
  border-radius:3px;background:rgba(10,108,180,.25);border:1px solid var(--vurgu)}
.madde li b{color:var(--metin);font-weight:600}

/* ---------- SSS ---------- */
.sss{display:grid;gap:11px}
.sss-madde{background:var(--kart);border:1px solid var(--cizgi);border-radius:var(--r);
  padding:0;overflow:hidden;transition:border-color .15s ease}
.sss-madde[open]{border-color:var(--cizgi2)}
.sss-madde summary{cursor:pointer;padding:18px 22px;font-size:16.5px;font-weight:580;
  list-style:none;display:flex;align-items:center;justify-content:space-between;gap:14px}
.sss-madde summary::-webkit-details-marker{display:none}
.sss-madde summary::after{content:"+";color:var(--vurgu);font-size:22px;font-weight:400;
  line-height:1;flex:0 0 auto;transition:transform .2s ease}
.sss-madde[open] summary::after{transform:rotate(45deg)}
.sss-madde p{color:var(--soluk);padding:0 22px 20px;margin:0;font-size:15.3px;max-width:74ch}

/* ---------- Yasal sayfalar ---------- */
.yasal-menu{display:flex;gap:8px;flex-wrap:wrap;padding-bottom:6px}
.yasal-menu a{padding:8px 15px;border-radius:99px;border:1px solid var(--cizgi);
  color:var(--soluk);font-size:14px}
.yasal-menu a:hover{border-color:var(--cizgi2);color:var(--metin);text-decoration:none}
.yasal-menu a.aktif{background:var(--kart2);border-color:var(--vurgu);color:var(--metin)}
.yasal-metin h2{font-size:19px;margin:26px 0 10px}
.yasal-metin h2:first-child{margin-top:0}
.yasal-metin p{color:var(--soluk);max-width:76ch}
.yasal-metin ul{color:var(--soluk);padding-left:20px;max-width:76ch}
.yasal-metin li{padding:4px 0}
.yasal-metin b{color:var(--metin)}

/* ---------- Kurumsal / güven ---------- */
.kurumsal{background:var(--zemin2);border-block:1px solid var(--cizgi)}
.kurumsal-ic{max-width:1200px;margin:0 auto;padding:56px 30px;display:grid;
  grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.kunye-kart{background:var(--kart);border:1px solid var(--cizgi);border-radius:var(--r);
  padding:26px}
.kunye-kart .satirlar li{border-color:var(--cizgi)}

/* ---------- CTA ---------- */
.cta{position:relative;overflow:hidden;border:1px solid rgba(10,108,180,.25);
  border-radius:20px;padding:52px 40px;text-align:center;
  background:linear-gradient(160deg,rgba(10,108,180,.10),rgba(12,18,29,.5) 62%)}
.cta h2{margin-bottom:12px}
.cta p{color:var(--soluk);max-width:520px;margin:0 auto 26px;font-size:17px}

/* ---------- Kaydırma ile beliren ---------- */
.bel{opacity:0;transform:translateY(18px);
  transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1)}
.bel.gorundu{opacity:1;transform:none}

/* =========================================================
   PANEL
   ========================================================= */
.panel{display:grid;grid-template-columns:232px 1fr;min-height:calc(100vh - 132px)}
.yan{border-right:1px solid var(--cizgi);padding:22px 14px;background:var(--zemin2)}
.yan .klinik-ad{font-weight:640;padding:0 11px 15px;border-bottom:1px solid var(--cizgi);
  margin-bottom:13px;font-size:15px}
.yan .klinik-ad small{display:block;color:var(--soluk2);font-weight:400;font-size:12.5px;
  margin-top:2px}
.yan a{display:flex;align-items:center;justify-content:space-between;gap:8px;
  color:var(--soluk);padding:9px 11px;border-radius:8px;font-size:14.5px;margin-bottom:2px}
.yan a:hover{background:var(--kart);color:var(--metin);text-decoration:none}
.yan a.aktif{background:var(--kart2);color:var(--metin);font-weight:560;
  box-shadow:inset 2px 0 0 var(--vurgu)}
.yan .say{background:var(--kirmizi);color:#fff;font-size:11px;font-weight:700;
  border-radius:99px;padding:1px 7px;min-width:19px;text-align:center}
.icerik{padding:26px 30px;min-width:0}

/* ---------- Funnel kutuları ---------- */
.funnel{display:flex;gap:9px;overflow-x:auto;padding-bottom:9px;margin-bottom:24px}
/* 10 aşama dar ekranda taşmasın: kutular esner, gerekirse kayar */
.funnel a{flex:1 1 0;min-width:92px;background:var(--kart);border:1px solid var(--cizgi);
  border-radius:11px;padding:13px 8px;text-align:center;color:var(--soluk);
  transition:border-color .15s ease}
.funnel a:hover{border-color:var(--vurgu-koyu);text-decoration:none}
.funnel a.aktif{border-color:var(--vurgu);background:var(--kart2)}
.funnel b{display:block;font-size:23px;color:var(--metin);line-height:1.15;font-weight:660;
  letter-spacing:-.02em}
.funnel span{font-size:12px}

/* ---------- Tahta (sürükle-bırak) ---------- */
.tahta{display:flex;gap:13px;overflow-x:auto;padding-bottom:14px;align-items:flex-start}
.sutun{flex:0 0 258px;background:var(--zemin2);border:1px solid var(--cizgi);
  border-radius:var(--r);padding:12px;min-height:180px;transition:border-color .15s ease}
.sutun.uzerinde{border-color:var(--vurgu);background:rgba(10,108,180,.04)}
.sutun-basI{display:flex;align-items:center;justify-content:space-between;
  padding:2px 4px 11px;font-size:13px;font-weight:600;color:var(--soluk);
  text-transform:uppercase;letter-spacing:.05em}
.sutun-basI em{font-style:normal;background:var(--kart2);color:var(--soluk);
  border-radius:99px;padding:1px 8px;font-size:11.5px;letter-spacing:0}
.kart-hasta{background:var(--kart);border:1px solid var(--cizgi);border-radius:11px;
  padding:12px;margin-bottom:9px;cursor:grab;transition:border-color .15s ease,transform .1s ease}
.kart-hasta:hover{border-color:var(--cizgi2)}
.kart-hasta:active{cursor:grabbing}
.kart-hasta.tasiniyor{opacity:.42;transform:scale(.97)}
.kart-hasta .ad{font-weight:580;font-size:14.5px;display:flex;align-items:center;gap:7px}
.kart-hasta .meta{color:var(--soluk2);font-size:12.5px;margin-top:5px;display:flex;
  gap:9px;flex-wrap:wrap}
.kart-hasta .tutar{color:var(--vurgu);font-weight:640}

/* ---------- Konuşmalar ---------- */
.konusma{display:grid;grid-template-columns:296px 1fr;gap:0;
  border:1px solid var(--cizgi);border-radius:var(--r);overflow:hidden;
  height:calc(100vh - 210px);min-height:520px;background:var(--kart)}
.liste{border-right:1px solid var(--cizgi);overflow-y:auto;background:var(--zemin2)}
.liste-ara{padding:11px;border-bottom:1px solid var(--cizgi);position:sticky;top:0;
  background:var(--zemin2);z-index:2}
.liste-ara input{padding:8px 12px;font-size:13.5px}
.liste a{display:block;padding:13px 15px;border-bottom:1px solid var(--cizgi);
  color:var(--metin)}
.liste a:hover{background:var(--kart);text-decoration:none}
.liste a.aktif{background:var(--kart2);box-shadow:inset 3px 0 0 var(--vurgu)}
.liste .st{display:flex;justify-content:space-between;align-items:center;gap:8px}
.liste .isim{font-weight:560;font-size:14.5px;display:flex;align-items:center;gap:7px;
  min-width:0}
.liste .isim span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.liste .onizleme{color:var(--soluk2);font-size:12.8px;margin-top:4px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.sohbet-sar{display:flex;flex-direction:column;min-width:0}
.sohbet-ust{padding:14px 20px;border-bottom:1px solid var(--cizgi);display:flex;
  align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  background:var(--kart2)}
.sohbet-ust h3{margin:0;font-size:16.5px;display:flex;align-items:center;gap:9px}
.akis-govde{flex:1;overflow-y:auto;padding:22px;display:flex;flex-direction:column;gap:11px;
  background:var(--zemin)}
.mes{max-width:70%;padding:11px 15px;border-radius:15px;font-size:14.8px;line-height:1.55;
  white-space:pre-wrap;word-break:break-word}
.mes.gelen{background:var(--kart2);align-self:flex-start;border-bottom-left-radius:5px}
.mes.giden{background:rgba(10,108,180,.12);border:1px solid rgba(10,108,180,.22);
  align-self:flex-end;border-bottom-right-radius:5px}
.mes.giden.personel{background:rgba(124,196,255,.12);border-color:rgba(124,196,255,.28)}
.mes .zaman{display:block;font-size:11px;color:var(--soluk2);margin-top:6px}
.yazma{border-top:1px solid var(--cizgi);padding:13px 16px;display:flex;gap:10px;
  background:var(--kart2)}
.yazma input{flex:1}
.devral-serit{padding:9px 20px;font-size:13.5px;display:flex;align-items:center;
  justify-content:space-between;gap:12px;flex-wrap:wrap}
.devral-serit.ai{background:rgba(10,108,180,.09);color:#9ef0e7;
  border-bottom:1px solid rgba(10,108,180,.2)}
.devral-serit.insan{background:rgba(124,196,255,.1);color:#bfe0ff;
  border-bottom:1px solid rgba(124,196,255,.22)}
.devral-serit form{display:inline}

/* ---------- Tablo ---------- */
table{width:100%;border-collapse:collapse;font-size:14.8px}
th{text-align:left;color:var(--soluk2);font-weight:560;font-size:12px;
  text-transform:uppercase;letter-spacing:.055em;padding:0 13px 11px}
td{padding:13px;border-top:1px solid var(--cizgi);vertical-align:middle}
tr:hover td{background:rgba(255,255,255,.018)}
.bos{padding:52px 20px;text-align:center;color:var(--soluk2)}

/* ---------- Etiket ---------- */
.etiket{display:inline-block;font-size:11.8px;padding:3px 10px;border-radius:99px;
  background:var(--kart2);color:var(--soluk);border:1px solid var(--cizgi);white-space:nowrap;
  font-weight:520}
.etiket.yeni{color:var(--soluk)}
.etiket.bilgi,.etiket.fotograf{color:var(--mavi);border-color:rgba(124,196,255,.3)}
.etiket.teklif{color:var(--sari);border-color:rgba(242,193,78,.3)}
.etiket.kapora,.etiket.ucus,.etiket.geldi,.etiket.operasyon,.etiket.takip{
  color:var(--yesil);border-color:rgba(69,201,125,.3)}
.etiket.kayip{color:var(--kirmizi);border-color:rgba(242,97,92,.3)}
.etiket.acil{color:#fff;background:var(--kirmizi);border-color:var(--kirmizi);font-weight:640}
.bayrak{font-size:16px}

/* ---------- Lead skoru ---------- */
.skor{display:inline-flex;align-items:center;justify-content:center;min-width:30px;
  height:22px;padding:0 7px;border-radius:99px;font-size:12px;font-weight:700;
  border:1px solid;line-height:1}
.skor.oncelikli{color:#0b2a1d;background:var(--yesil);border-color:var(--yesil)}
.skor.aday     {color:#2a2109;background:var(--sari);border-color:var(--sari)}
.skor.izlemede {color:var(--mavi);background:rgba(124,196,255,.12);border-color:rgba(124,196,255,.35)}
.skor.pasif    {color:var(--soluk2);background:var(--kart2);border-color:var(--cizgi)}

/* ---------- Greft planlama tuvali ---------- */
.plan-duzen{display:grid;grid-template-columns:1fr 360px;gap:22px;align-items:start}
.plan-svg{width:100%;max-width:400px;display:block;margin:0 auto;
  touch-action:none;user-select:none}
.plan-arac{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:14px;
  padding-top:14px;border-top:1px solid var(--cizgi)}
.plan-duzen input[type=range]{-webkit-appearance:none;appearance:none;height:5px;
  border-radius:99px;background:var(--cizgi2);outline:0}
.plan-duzen input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;
  width:17px;height:17px;border-radius:50%;background:var(--metin);cursor:pointer;
  border:2px solid var(--vurgu)}

/* ---------- Fotoğraf üzerine çizim ---------- */
.cizim-sar{position:relative;display:inline-block;max-width:100%;border-radius:var(--r-s);
  overflow:hidden;border:1px solid var(--cizgi);background:var(--zemin)}
.cizim-sar img{display:block;max-width:100%;height:auto}
.cizim-sar canvas{position:absolute;inset:0;cursor:crosshair;touch-action:none}

/* ---------- Öncesi/sonrası kaydırmalı karşılaştırma ---------- */
.kars{position:relative;overflow:hidden;border-radius:var(--r-s);
  border:1px solid var(--cizgi);background:var(--zemin);user-select:none;
  touch-action:none;aspect-ratio:3/4}
.kars img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.kars .ust-kat{clip-path:inset(0 50% 0 0)}
.kars-sap{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--vurgu);
  transform:translateX(-1px);pointer-events:none;box-shadow:0 0 12px rgba(10,108,180,.6)}
.kars-tutamac{position:absolute;top:50%;left:50%;width:34px;height:34px;border-radius:50%;
  background:var(--vurgu);color:#ffffff;transform:translate(-50%,-50%);
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;
  pointer-events:none;box-shadow:0 4px 14px rgba(18,40,63,.12)}
.kars-etiket{position:absolute;bottom:9px;font-size:11.5px;padding:3px 9px;border-radius:99px;
  background:rgba(8,12,20,.78);color:var(--metin);pointer-events:none;letter-spacing:.03em}
.kars-etiket.sol{left:9px}
.kars-etiket.sag{right:9px}

/* ---------- Zaman tüneli ---------- */
.tunel{position:relative;padding-left:26px}
.tunel::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:2px;
  background:var(--cizgi)}
.tunel-satir{position:relative;padding:0 0 20px}
.tunel-nokta{position:absolute;left:-26px;top:5px;width:14px;height:14px;
  border-radius:50%;background:var(--kart);border:2px solid var(--cizgi2)}
.tunel-satir.mesaj-gelen .tunel-nokta{border-color:var(--mavi)}
.tunel-satir.kapora .tunel-nokta{border-color:var(--yesil);background:var(--yesil)}
.tunel-satir.plan .tunel-nokta,
.tunel-satir.fotograf .tunel-nokta{border-color:var(--vurgu)}
.tunel-satir.form .tunel-nokta{border-color:var(--sari)}
.tunel-satir.otomatik .tunel-nokta{border-style:dashed}
.tunel-ust{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.tunel-ust b{font-size:14.8px;font-weight:580}
.tunel-icerik p{color:var(--soluk);font-size:14px;margin:5px 0 0;
  white-space:pre-wrap;word-break:break-word}

/* ---------- Personel çeviri satırı ---------- */
.ceviri{display:block;margin-top:8px;padding-top:8px;font-size:13.5px;color:var(--soluk);
  border-top:1px dashed var(--cizgi2);font-style:italic}

/* ---------- Bilgi satırları ---------- */
.satirlar{list-style:none;padding:0;margin:0}
.satirlar li{display:flex;justify-content:space-between;gap:15px;padding:10px 0;
  border-bottom:1px solid var(--cizgi);font-size:14.5px}
.satirlar li:last-child{border-bottom:0}
.satirlar span{color:var(--soluk)}
.satirlar b{text-align:right;font-weight:580}

.ikili-kolon{display:grid;grid-template-columns:1fr 330px;gap:22px}
.ust-arali{margin-top:26px}

/* ---------- Simülasyon ---------- */
.sim{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--cizgi);
  border-radius:var(--r);overflow:hidden;background:var(--zemin2)}
.sim > div{padding:20px;text-align:center}
.sim > div + div{border-left:1px solid var(--cizgi);background:rgba(10,108,180,.04)}
.sim h4{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--soluk2);
  margin-bottom:14px}
.sim-gorsel{aspect-ratio:3/4;border-radius:11px;border:1px dashed var(--cizgi2);
  display:flex;align-items:center;justify-content:center;color:var(--soluk2);font-size:13px;
  background:var(--kart);overflow:hidden}
.sim-gorsel img{width:100%;height:100%;object-fit:cover}
.olcek{display:flex;gap:5px;margin-top:15px;justify-content:center}
.olcek i{width:23px;height:5px;border-radius:99px;background:var(--cizgi2);display:block}
.olcek i.dolu{background:var(--vurgu)}

@media(max-width:1080px){
  .izgara-4{grid-template-columns:1fr 1fr}
  .ikili-esit{grid-template-columns:1fr;gap:30px}
  .plan-duzen{grid-template-columns:1fr}
  .kahraman-ic{grid-template-columns:1fr;gap:40px}
  .kurumsal-ic{grid-template-columns:1fr}
  .akis{grid-template-columns:1fr 1fr}
  .akis-adim::after{display:none}
  .konusma{grid-template-columns:1fr;height:auto}
  .liste{max-height:280px;border-right:0;border-bottom:1px solid var(--cizgi)}
}
@media(max-width:820px){
  .panel{grid-template-columns:1fr}
  .yan{border-right:0;border-bottom:1px solid var(--cizgi)}
  .izgara,.izgara-2,.izgara-4,.fiyat-izgara,.alt-ic{grid-template-columns:1fr}
  .band-ic{grid-template-columns:1fr 1fr;gap:22px}
  .ikili-kolon,.ikili-esit,.ikili,.sim{grid-template-columns:1fr}
  .sim > div + div{border-left:0;border-top:1px solid var(--cizgi)}
  .ust nav .gizle-mobil{display:none}
  .bolum{padding:40px 22px}
}

/* ===========================================================
   DİL SEÇİCİ
   =========================================================== */
.dil-secici{position:relative;margin-inline-start:6px}
.dil-dugme{display:flex;align-items:center;gap:6px;background:transparent;
  border:1px solid var(--cizgi);border-radius:9px;color:var(--soluk);
  padding:7px 10px;font:inherit;font-size:13px;cursor:pointer;line-height:1;
  transition:border-color .18s, color .18s}
.dil-dugme:hover{border-color:var(--vurgu);color:var(--ak)}
.dil-dugme .bayrak{font-size:15px}
.dil-dugme .dil-kod{font-weight:600;letter-spacing:.4px}
.dil-dugme .dil-ok{font-size:10px;opacity:.7}
.dil-menu{position:absolute;top:calc(100% + 8px);inset-inline-end:0;min-width:172px;
  background:var(--zemin2);border:1px solid var(--cizgi);border-radius:12px;
  padding:6px;z-index:60;box-shadow:0 18px 44px rgba(18,40,63,.12);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s, transform .16s, visibility .16s}
.dil-secici.acik .dil-menu{opacity:1;visibility:visible;transform:translateY(0)}
.dil-menu a{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:8px;
  color:var(--soluk);font-size:14px;text-decoration:none;white-space:nowrap}
.dil-menu a:hover{background:rgba(10,108,180,.06);color:var(--ak)}
.dil-menu a.aktif{color:var(--vurgu);background:rgba(10,108,180,.09)}
.dil-menu a .bayrak{font-size:16px}
@media (max-width:760px){ .dil-dugme .dil-kod{display:none} }

/* ===========================================================
   SAĞDAN SOLA (Arapça)
   Yön bağımlı her kural burada aynalanır.
   =========================================================== */
[dir="rtl"] .kim{padding-left:0;padding-right:8px;
  border-left:0;border-right:1px solid var(--cizgi)}
[dir="rtl"] .akis-adim::after{content:"←";right:auto;left:-13px}
[dir="rtl"] .fiyat-etiket{right:auto;left:22px}
[dir="rtl"] .madde li{padding-left:0;padding-right:26px}
[dir="rtl"] .madde li::before{left:auto;right:0}
[dir="rtl"] .yasal-metin ul{padding-left:0;padding-right:20px}
[dir="rtl"] th{text-align:right}
[dir="rtl"] .yan{border-right:0;border-left:1px solid var(--cizgi)}
[dir="rtl"] .liste{border-right:0;border-left:1px solid var(--cizgi)}
[dir="rtl"] .sim > div + div{border-left:0;border-right:1px solid var(--cizgi)}
[dir="rtl"] .tunel{padding-left:0;padding-right:26px}
[dir="rtl"] .tunel::before{left:auto;right:6px}
[dir="rtl"] .tunel-nokta{left:auto;right:-26px}
[dir="rtl"] .telefon-alt button{transform:scaleX(-1)}
/* Arapçada sayaç okları ve akış yönü tersine döner */
[dir="rtl"] .serit{direction:rtl}
[dir="rtl"] .cizim{direction:ltr}     /* SVG şemalar aynalanmaz, metinleri Arapça */
[dir="rtl"] .demo-oneri{direction:rtl}
@media (max-width:900px){
  [dir="rtl"] .liste{border-left:0;border-bottom:1px solid var(--cizgi)}
  [dir="rtl"] .yan{border-left:0;border-bottom:1px solid var(--cizgi)}
  [dir="rtl"] .sim > div + div{border-right:0;border-top:1px solid var(--cizgi)}
}

/* Arap alfabesi Latin fontlarda küçük durur; biraz büyütüp satır arasını açıyoruz */
html[lang="ar"] body{font-size:16.5px;line-height:1.85}
html[lang="ar"] h1{line-height:1.35}
html[lang="ar"] h2{line-height:1.4}
html[lang="ar"] .rozet,
html[lang="ar"] .serit-adim b,
html[lang="ar"] .fiyat-etiket{letter-spacing:0}
/* Arapça metin Latin metne göre daha çok yer kaplar: başlıkları biraz kısıyoruz */
/* Rusça ve Almanca Türkçeden ~%25 uzun, Arapça daha da hacimli:
   kahraman başlığı ekranı taşırmasın diye dile göre ölçekliyoruz */
html[lang="ru"] .kahraman h1{font-size:clamp(29px,3.9vw,45px)}
html[lang="de"] .kahraman h1{font-size:clamp(30px,4.2vw,48px)}
html[lang="en"] .kahraman h1{font-size:clamp(32px,4.7vw,54px)}
html[lang="ar"] .kahraman h1{font-size:clamp(28px,3.5vw,44px)}
html[lang="ar"] .bolum-basI h2,
html[lang="ar"] .kurumsal h2,
html[lang="ar"] .cta h2{font-size:clamp(24px,2.6vw,34px)}
html[lang="ar"] .marka{direction:ltr}
/* Süreç şeması sağdan sola akmalı: şemayı aynalıyoruz, metinleri geri çeviriyoruz */
[dir="rtl"] .akis-sema{transform:scaleX(-1)}
[dir="rtl"] .akis-sema text{transform:scaleX(-1);transform-box:fill-box;transform-origin:center}

/* ===========================================================
   LOGO
   =========================================================== */
.marka{gap:9px}
.logo-im{flex:0 0 auto;display:block;filter:drop-shadow(0 4px 14px rgba(10,108,180,.28));
  transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.marka:hover .logo-im{transform:rotate(-6deg) scale(1.07)}
.logo-nabiz{stroke-dasharray:60;stroke-dashoffset:0}
.marka:hover .logo-nabiz{animation:nabizCiz 1s ease forwards}
@keyframes nabizCiz{0%{stroke-dashoffset:60}100%{stroke-dashoffset:0}}

/* ===========================================================
   HAREKET
   =========================================================== */

/* Bölüm içi kademeli beliriş: kartlar sırayla gelsin */
.bel.gorundu .izgara > *,
.bel.gorundu .izgara-4 > *,
.bel.gorundu .akis > *,
.bel.gorundu .fiyat-izgara > *{animation:kademe .62s cubic-bezier(.22,1,.36,1) backwards}
.bel.gorundu .izgara > :nth-child(1),
.bel.gorundu .izgara-4 > :nth-child(1),
.bel.gorundu .akis > :nth-child(1),
.bel.gorundu .fiyat-izgara > :nth-child(1){animation-delay:.05s}
.bel.gorundu .izgara > :nth-child(2),
.bel.gorundu .izgara-4 > :nth-child(2),
.bel.gorundu .akis > :nth-child(2),
.bel.gorundu .fiyat-izgara > :nth-child(2){animation-delay:.14s}
.bel.gorundu .izgara > :nth-child(3),
.bel.gorundu .izgara-4 > :nth-child(3),
.bel.gorundu .akis > :nth-child(3){animation-delay:.23s}
.bel.gorundu .izgara-4 > :nth-child(4),
.bel.gorundu .akis > :nth-child(4){animation-delay:.32s}
@keyframes kademe{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* Kart üzerine gelince hafif kalkış */
.ozellik,.akis-adim,.fiyat,.sss-madde{transition:transform .24s cubic-bezier(.22,1,.36,1),
  border-color .24s ease,box-shadow .24s ease}
.ozellik:hover,.akis-adim:hover{transform:translateY(-5px);border-color:rgba(10,108,180,.4);
  box-shadow:0 16px 40px rgba(18,40,63,.09)}
.fiyat:hover{transform:translateY(-4px);border-color:rgba(10,108,180,.45)}
.ozellik .ik{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.ozellik:hover .ik{transform:scale(1.14) rotate(-7deg)}

/* Süzülen görsel öğeler (telefon, portreler) */
.yuzen{animation:suzul 5.5s ease-in-out infinite}
@keyframes suzul{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* Sayı bandı sayaçları */
.band-ic em{display:inline-block;transition:transform .3s ease}
.band-ic div:hover em{transform:scale(1.06)}
.sayac{opacity:0}
.bel.gorundu .sayac{animation:sayacGel .7s cubic-bezier(.22,1,.36,1) forwards}
.bel.gorundu .band-ic > :nth-child(1) .sayac{animation-delay:.05s}
.bel.gorundu .band-ic > :nth-child(2) .sayac{animation-delay:.16s}
.bel.gorundu .band-ic > :nth-child(3) .sayac{animation-delay:.27s}
.bel.gorundu .band-ic > :nth-child(4) .sayac{animation-delay:.38s}
@keyframes sayacGel{from{opacity:0;transform:translateY(12px) scale(.94)}
  to{opacity:1;transform:none}}

/* Kahraman: metin satır satır gelsin */
.kahraman-metin > *{animation:acil .8s cubic-bezier(.22,1,.36,1) backwards}
.kahraman-metin > :nth-child(1){animation-delay:.05s}
.kahraman-metin > :nth-child(2){animation-delay:.16s}
.kahraman-metin > :nth-child(3){animation-delay:.28s}
.kahraman-metin > :nth-child(4){animation-delay:.4s}
.kahraman-metin > :nth-child(5){animation-delay:.52s}
@keyframes acil{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.telefon-sar{animation:acil 1s cubic-bezier(.22,1,.36,1) .3s backwards}

/* Görsel kutuları */
.gorsel-alan{max-width:290px;margin:0 auto 14px}
.ozellik.alan .cizim{margin-bottom:6px}
.serit-portre{padding:22px 18px}
.serit-portre .cizim{max-width:880px}
.mini-guven.ortala{justify-content:center}
.cizim-kutu .cizim{transition:transform .5s cubic-bezier(.22,1,.36,1)}
.cizim-kutu:hover .cizim{transform:scale(1.015)}

/* Düğmeye vurgu: ışık geçişi */
.dugme:not(.hayalet){position:relative;overflow:hidden}
.dugme:not(.hayalet)::after{content:"";position:absolute;top:0;bottom:0;width:44%;
  left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg);transition:left .55s ease}
.dugme:not(.hayalet):hover::after{left:130%}

/* Hareket azaltma tercihi: her şey dursun */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  .bel{opacity:1;transform:none}
}
/* Yan yana kolonlarda illüstrasyon şişmesin */
.ikili-esit .cizim-kutu .cizim{width:100%;height:auto;max-height:300px;
  max-width:470px;margin:0 auto;display:block}

/* ===========================================================
   FOTOĞRAFLAR
   Gerçek klinik/hasta fotoğrafları. Hepsi yerelde (static/foto),
   dışarıdan istek yok. Koyu temaya oturması için üstlerine
   hafif bir degrade perde çekiliyor.
   =========================================================== */
.foto{position:relative;margin:0;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--cizgi);background:var(--kart);line-height:0}
.foto img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s cubic-bezier(.22,1,.36,1),filter .4s ease;
  filter:saturate(.92) contrast(1.03)}
.foto::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,17,28,.12) 0%,rgba(8,17,28,0) 38%,
    rgba(8,17,28,.46) 100%);
  box-shadow:inset 0 0 70px rgba(8,17,28,.34)}
.foto:hover img{transform:scale(1.035);filter:saturate(1) contrast(1.05)}

.foto-buyuk img{aspect-ratio:16/10}
.foto-kart{margin-bottom:18px}
.foto-kart img{aspect-ratio:3/2}

.foto figcaption{position:absolute;left:14px;bottom:12px;z-index:2;line-height:1.3;
  color:#dbe8f7;font-size:12.5px;letter-spacing:.2px;
  display:flex;align-items:center;gap:7px;
  background:rgba(8,17,28,.5);backdrop-filter:blur(6px);
  padding:6px 11px;border-radius:8px;border:1px solid rgba(10,108,180,.10)}
.foto figcaption .nokta{width:7px;height:7px;border-radius:50%;background:#ff5f56;
  box-shadow:0 0 0 3px rgba(255,95,86,.18);animation:nabiz2 2s ease-in-out infinite}

/* --- hasta portreleri --- */
.portreler{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:16px;margin-top:6px}
.portre{position:relative;margin:0;text-align:center}
.portre img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:50%;
  border:2px solid var(--cizgi);
  filter:saturate(.9) contrast(1.04);
  transition:transform .35s cubic-bezier(.22,1,.36,1),border-color .3s ease,filter .3s ease}
.portre:hover img{transform:translateY(-6px) scale(1.03);
  border-color:var(--vurgu);filter:saturate(1.05) contrast(1.06)}
.portre-bayrak{position:absolute;top:4px;inset-inline-end:8%;font-size:20px;
  background:var(--zemin2);border:1px solid var(--cizgi);border-radius:50%;
  width:34px;height:34px;display:grid;place-items:center;line-height:1}
.portre figcaption{margin-top:11px;color:var(--soluk);font-size:13.5px;font-weight:560}
@media (max-width:640px){
  .portreler{grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:12px}
  .portre-bayrak{width:28px;height:28px;font-size:16px}
}
/* Zaten karanlık çekilmiş fotoğraflarda perdeyi kaldırıp pozlamayı açıyoruz */
.foto-karanlik img{filter:brightness(1.7) contrast(1.16) saturate(.5) hue-rotate(-14deg)}
.foto-karanlik:hover img{filter:brightness(1.85) contrast(1.18) saturate(.6) hue-rotate(-14deg)}
.foto-karanlik::after{background:linear-gradient(180deg,rgba(8,17,28,.05) 0%,
  rgba(8,17,28,0) 45%,rgba(8,17,28,.34) 100%);box-shadow:none}

/* Gece fotoğrafı: karanlıkta parlayan telefonun ekranına gerçek bir hasta mesajı */
.foto-gece img{filter:none}
.foto-gece:hover img{filter:brightness(1.06)}
.foto-gece::after{background:linear-gradient(180deg,rgba(8,17,28,.1) 0%,
  rgba(8,17,28,0) 50%,rgba(8,17,28,.5) 100%);box-shadow:none}
.foto-mesaj{position:absolute;top:20%;left:23%;max-width:26%;z-index:2;
  background:#e9eef5;color:#0d1626;font-size:clamp(9px,1.05vw,13px);line-height:1.4;
  padding:9px 12px;border-radius:12px 12px 12px 3px;text-align:start;
  box-shadow:0 10px 30px rgba(0,0,0,.55);
  animation:mesajGel .7s cubic-bezier(.22,1,.36,1) .5s backwards}
.foto-mesaj i{display:block;margin-top:5px;height:4px;width:34px;border-radius:2px;
  background:var(--vurgu)}
@keyframes mesajGel{from{opacity:0;transform:translateY(10px) scale(.94)}to{opacity:1;transform:none}}
@media (max-width:640px){ .foto-mesaj{display:none} }

/* ---------- Kanal simülatörü ---------- */
.sim-ornekler{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.sim-ornekler button{background:var(--zemin2);border:1px solid var(--cizgi);color:var(--soluk);
  border-radius:8px;padding:7px 12px;font:inherit;font-size:13px;cursor:pointer;
  transition:border-color .15s,color .15s}
.sim-ornekler button:hover{border-color:var(--vurgu);color:var(--ak)}
.sim-sonuc{margin-top:18px;border-top:1px solid var(--cizgi);padding-top:16px}
.sim-satir{margin-bottom:12px}
.sim-satir b{display:block;font-size:11.5px;letter-spacing:.4px;text-transform:uppercase;
  color:var(--soluk2);margin-bottom:5px}
.sim-satir p{margin:0;padding:11px 14px;border-radius:12px;line-height:1.55;font-size:14.5px;
  white-space:pre-wrap;word-break:break-word}
.sim-hasta p{background:var(--zemin2);border:1px solid var(--cizgi);border-radius:12px 12px 12px 3px}
.sim-ai p{background:rgba(10,108,180,.1);border:1px solid rgba(10,108,180,.28);
  border-radius:12px 12px 3px 12px}
.sim-alt{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  color:var(--soluk2);font-size:13px}
.sim-sonuc pre{background:var(--zemin2);border:1px solid var(--cizgi);border-radius:10px;
  padding:12px;overflow-x:auto;font-size:12px;line-height:1.5;color:var(--soluk);margin-top:8px}

/* ---------- Arama ---------- */
.ara-kutu{display:flex;gap:10px;margin:18px 0 20px;max-width:640px}
.ara-kutu input{flex:1;margin:0}
.ara-mesajlar{display:flex;flex-direction:column;gap:10px}
.ara-mesaj{display:block;background:var(--zemin2);border:1px solid var(--cizgi);
  border-radius:12px;padding:12px 14px;text-decoration:none;
  transition:border-color .15s,transform .15s}
.ara-mesaj:hover{border-color:var(--vurgu);transform:translateY(-2px);text-decoration:none}
.ara-ust{display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  margin-bottom:6px;flex-wrap:wrap}
.ara-ust b{color:var(--metin);font-size:14.5px}
.ara-ust small{color:var(--soluk2);font-size:12px}
.ara-mesaj p{margin:0;color:var(--soluk);font-size:14px;line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- Denetim izi ---------- */
.denetim-suzge{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 18px}
.denetim-suzge a{background:var(--zemin2);border:1px solid var(--cizgi);color:var(--soluk);
  border-radius:8px;padding:7px 12px;font-size:13px;text-decoration:none;
  transition:border-color .15s,color .15s}
.denetim-suzge a:hover{border-color:var(--vurgu);color:var(--ak);text-decoration:none}
.denetim-suzge a.aktif{background:rgba(10,108,180,.12);border-color:rgba(10,108,180,.45);
  color:var(--vurgu)}

/* ---------- Kurulum sihirbazı ---------- */
.kurulum-cubuk{height:8px;border-radius:99px;background:var(--zemin2);
  border:1px solid var(--cizgi);overflow:hidden;margin:18px 0 24px;max-width:760px}
.kurulum-cubuk i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--vurgu-koyu),#3d9ad8);transition:width .6s cubic-bezier(.22,1,.36,1)}
.kurulum-liste{display:flex;flex-direction:column;gap:12px;margin-bottom:22px}
.kurulum-adim{display:flex;align-items:center;gap:16px;background:var(--kart);
  border:1px solid var(--cizgi);border-radius:var(--r);padding:16px 18px;
  transition:border-color .2s,transform .2s}
.kurulum-adim:hover{transform:translateY(-2px)}
.kurulum-adim.siradaki{border-color:rgba(10,108,180,.5);
  box-shadow:0 0 0 1px rgba(10,108,180,.16)}
.kurulum-no{flex:0 0 auto;width:34px;height:34px;border-radius:50%;display:grid;
  place-items:center;font-weight:680;font-size:14px;background:var(--zemin2);
  border:1px solid var(--cizgi);color:var(--soluk2)}
.kurulum-adim.tamam .kurulum-no{background:rgba(10,108,180,.14);
  border-color:rgba(10,108,180,.45);color:var(--vurgu)}
.kurulum-govde{flex:1;min-width:0}
.kurulum-govde b{display:block;font-size:15.5px}
.kurulum-govde p{margin:3px 0 0;color:var(--soluk2);font-size:13.5px}
.kurulum-adim.tamam .kurulum-govde b{color:var(--soluk)}
.kurulum-bitti{border-color:rgba(10,108,180,.35)}
.yan .kurulum-link{display:flex;justify-content:space-between;align-items:center;gap:8px;
  background:rgba(10,108,180,.1);border:1px solid rgba(10,108,180,.3);color:var(--vurgu)}
.yan .kurulum-link em{font-style:normal;font-size:12px;font-weight:680;opacity:.85}

/* ---------- Vitrin modu ---------- */
.vitrin-serit{display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;background:var(--vurgu-acik);
  border-bottom:1px solid #bcdcf3;padding:12px 22px;
  color:var(--metin);font-size:14px}
.vitrin-serit b{color:var(--vurgu)}
.vitrin-panel form button[type=submit],
.vitrin-panel .dugme.tam,
.vitrin-panel input,.vitrin-panel select,.vitrin-panel textarea{opacity:.62}
.vitrin-panel form{position:relative}

/* ===========================================================
   ROI HESAPLAYICI
   =========================================================== */
.roi{display:grid;grid-template-columns:1fr 380px;gap:24px;align-items:start}
.roi-girdi{background:var(--kart);border:1px solid var(--cizgi);border-radius:var(--r);
  padding:26px 28px}
.roi-girdi label{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  color:var(--soluk);font-size:14.5px;margin:0 0 8px}
.roi-girdi label + input{margin-bottom:22px}
.roi-girdi label b{color:var(--vurgu);font-size:17px;font-variant-numeric:tabular-nums}
.roi-girdi input[type=range]{width:100%;height:6px;-webkit-appearance:none;appearance:none;
  background:var(--zemin2);border:1px solid var(--cizgi);border-radius:99px;
  padding:0;margin:0 0 22px;cursor:pointer}
.roi-girdi input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:22px;height:22px;border-radius:50%;background:var(--vurgu);cursor:pointer;
  border:3px solid var(--zemin);box-shadow:0 0 0 1px var(--vurgu),0 4px 14px rgba(10,108,180,.4);
  transition:transform .15s}
.roi-girdi input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.12)}
.roi-girdi input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;
  background:var(--vurgu);border:3px solid var(--zemin);cursor:pointer}

.roi-sonuc{background:linear-gradient(180deg,rgba(10,108,180,.09),rgba(10,108,180,.02));
  border:1px solid rgba(10,108,180,.32);border-radius:var(--r);padding:24px 26px;
  position:sticky;top:88px}
.roi-satir{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:11px 0;border-bottom:1px solid var(--cizgi)}
.roi-satir span{color:var(--soluk);font-size:14px}
.roi-satir b{font-size:19px;font-variant-numeric:tabular-nums;white-space:nowrap}
.roi-satir.buyuk{border-bottom:0;padding-top:16px}
.roi-satir.buyuk span{color:var(--metin);font-weight:560}
.roi-satir.buyuk b{font-size:29px;color:var(--vurgu);letter-spacing:-.02em}
.roi-satir.kucuk{border-bottom:0;padding-top:0}
.roi-satir.kucuk span,.roi-satir.kucuk b{font-size:13px;color:var(--soluk2)}
.roi-satir b.eksi{color:var(--kirmizi)}
.roi-geri{margin:14px 0 18px;padding:11px 14px;border-radius:10px;font-size:13.5px;
  background:rgba(10,108,180,.12);border:1px solid rgba(10,108,180,.3);color:var(--vurgu)}
.roi-geri.zayif{background:rgba(255,139,132,.1);border-color:rgba(255,139,132,.3);
  color:var(--kirmizi)}
@media (max-width:900px){
  .roi{grid-template-columns:1fr}
  .roi-sonuc{position:static}
}

/* ===========================================================
   KARŞILAŞTIRMA TABLOSU
   =========================================================== */
.kiyas-sar{overflow-x:auto;border:1px solid var(--cizgi);border-radius:var(--r);
  background:var(--kart)}
table.kiyas{width:100%;min-width:640px;border-collapse:collapse}
table.kiyas th,table.kiyas td{padding:15px 18px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--cizgi);font-size:14.5px;line-height:1.5}
table.kiyas thead th{font-size:12px;letter-spacing:.5px;text-transform:uppercase;
  color:var(--soluk2);font-weight:600;background:var(--zemin2)}
table.kiyas thead th.bizim{color:var(--vurgu)}
table.kiyas tbody tr:last-child td{border-bottom:0}
table.kiyas td.konu{color:var(--soluk);width:22%;font-weight:560}
table.kiyas td.bizim{color:var(--metin);background:rgba(10,108,180,.055);
  border-left:1px solid rgba(10,108,180,.22);border-right:1px solid rgba(10,108,180,.22)}
table.kiyas td.onlar{color:var(--soluk2)}
table.kiyas .tik{color:var(--vurgu);font-weight:700;margin-inline-end:4px}
[dir="rtl"] table.kiyas th,[dir="rtl"] table.kiyas td{text-align:right}
[dir="rtl"] table.kiyas td.bizim{border-left:1px solid rgba(10,108,180,.22);
  border-right:1px solid rgba(10,108,180,.22)}

/* ---------- Panel dili seçici ---------- */
.panel-dil{display:flex;flex-wrap:wrap;gap:4px;margin-top:16px;padding-top:14px;
  border-top:1px solid var(--cizgi)}
.panel-dil a{padding:5px 7px;border-radius:7px;font-size:16px;line-height:1;
  border:1px solid transparent;opacity:.5;transition:opacity .15s,border-color .15s;
  background:none;display:block}
.panel-dil a:hover{opacity:1}
.panel-dil a.aktif{opacity:1;border-color:rgba(10,108,180,.45);background:rgba(10,108,180,.1)}

/* ===========================================================
   KIYAS — danışman kadrosu vs Klinik AI
   Sayfanın en sert argümanı: para. Bu yüzden tablo değil,
   yan yana iki tutar ve ortada fark rozeti.
   =========================================================== */
.kiyas-bolum{position:relative}
.kiyas-bolum::before{content:"";position:absolute;inset:-40px -10% auto -10%;height:420px;
  background:radial-gradient(60% 60% at 50% 0%,rgba(10,108,180,.07),transparent 70%);
  pointer-events:none}
.kiyas-rozet{margin-bottom:16px}

.kiyas-kartlar{display:grid;grid-template-columns:1fr auto 1fr;gap:0;align-items:stretch;
  max-width:1000px}
.kiyas-kart{background:var(--kart);border:1px solid var(--cizgi);padding:26px 28px 24px;
  display:flex;flex-direction:column}
.kiyas-kart.onlar{border-radius:var(--r) 0 0 var(--r);border-right:0;opacity:.94}
.kiyas-kart.bizim{border-radius:0 var(--r) var(--r) 0;border-left:0;
  border-color:rgba(10,108,180,.42);
  background:linear-gradient(180deg,rgba(10,108,180,.09),rgba(10,108,180,.02));
  box-shadow:0 24px 60px rgba(18,40,63,.09)}
.kiyas-kart h3{font-size:15px;letter-spacing:.2px;color:var(--soluk);margin-bottom:18px;
  font-weight:560}
.kiyas-kart.bizim h3{color:var(--vurgu)}

.kiyas-tutar{font-size:clamp(34px,4.4vw,50px);font-weight:700;letter-spacing:-.035em;
  line-height:1;font-variant-numeric:tabular-nums;margin-bottom:8px}
.kiyas-kart.onlar .kiyas-tutar{color:var(--kirmizi)}
.kiyas-kart.bizim .kiyas-tutar{color:var(--vurgu);
  text-shadow:0 0 44px rgba(10,108,180,.42)}
.kiyas-birim{color:var(--soluk2);font-size:13.5px;margin-bottom:20px;
  padding-bottom:17px;border-bottom:1px solid var(--cizgi)}

.kiyas-kart ul{list-style:none;padding:0;margin:0 0 18px;display:flex;
  flex-direction:column;gap:11px;flex:1}
.kiyas-kart li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;
  line-height:1.5;color:var(--soluk)}
.kiyas-kart.bizim li{color:var(--metin)}
.kiyas-kart .tik,.kiyas-kart .carpi{flex:0 0 auto;width:20px;height:20px;border-radius:50%;
  display:grid;place-items:center;font-size:11px;font-weight:700;margin-top:1px}
.kiyas-kart .tik{background:rgba(10,108,180,.16);color:var(--vurgu)}
.kiyas-kart .carpi{background:rgba(255,139,132,.14);color:var(--kirmizi)}
.kiyas-kart.bizim .dugme{margin-top:auto}

/* Ortadaki ayraç — rakam yok, sadece geçiş */
.kiyas-ayrac{display:flex;align-items:center;justify-content:center;padding:0 20px;
  position:relative;min-width:120px}
.kiyas-ayrac span{position:relative;z-index:1;color:var(--soluk2);font-size:12.5px;
  letter-spacing:.4px;background:var(--zemin);
  padding:8px 12px;border-radius:99px;border:1px solid var(--cizgi);white-space:nowrap}
.kiyas-ayrac::before{content:"";position:absolute;top:12%;bottom:12%;left:50%;width:1px;
  transform:translateX(-50%);
  background:linear-gradient(180deg,transparent,rgba(10,108,180,.35),transparent)}

.kiyas-varsayim{color:var(--soluk2);font-size:13.5px;max-width:860px;margin-top:20px}

/* Satır satır tablo artık katlanır — meraklısı açar */
.kiyas-detay{margin-top:22px;max-width:1000px}
.kiyas-detay summary{cursor:pointer;color:var(--soluk);font-size:14.5px;
  padding:13px 18px;background:var(--kart);border:1px solid var(--cizgi);
  border-radius:var(--r-s);list-style:none;transition:border-color .15s,color .15s}
.kiyas-detay summary::-webkit-details-marker{display:none}
.kiyas-detay summary::after{content:" ▾";opacity:.6}
.kiyas-detay[open] summary::after{content:" ▴"}
.kiyas-detay summary:hover{border-color:var(--vurgu);color:var(--ak)}
.kiyas-detay .kiyas-sar{margin-top:14px}
table.kiyas td.onlar .carpi{color:var(--kirmizi);font-weight:700;margin-inline-end:4px}

@media (max-width:860px){
  .kiyas-kartlar{grid-template-columns:1fr;max-width:520px}
  .kiyas-kart.onlar{border-radius:var(--r) var(--r) 0 0;border-right:1px solid var(--cizgi);
    border-bottom:0}
  .kiyas-kart.bizim{border-radius:0 0 var(--r) var(--r);border-left:1px solid rgba(10,108,180,.42);
    border-top:0}
  .kiyas-ayrac{padding:14px 22px;background:var(--zemin2);
    border-inline:1px solid var(--cizgi);min-width:0}
  .kiyas-ayrac::before{top:auto;bottom:auto;left:8%;right:8%;width:auto;height:1px;
    transform:none;
    background:linear-gradient(90deg,transparent,rgba(10,108,180,.3),transparent)}
}
.kiyas-dipnot{margin-top:auto;padding-top:15px;border-top:1px solid var(--cizgi);
  color:var(--kirmizi);font-size:13.5px;line-height:1.5;opacity:.9}

/* ===========================================================
   CANLI DESTEK — WhatsApp
   Siteyi gezen klinik sahibinin bize ulaştığı yer.
   Hasta tarafındaki sayfalarda YOKTUR (marka görünmezliği).
   =========================================================== */
.wa-destek{position:fixed;bottom:22px;inset-inline-end:22px;z-index:80;
  display:inline-flex;align-items:center;gap:0;
  height:56px;padding:0;border-radius:99px;
  background:#25d366;color:#06331b;text-decoration:none;
  box-shadow:0 10px 30px rgba(37,211,102,.34),0 2px 8px rgba(18,40,63,.10);
  transition:gap .3s cubic-bezier(.22,1,.36,1),padding .3s cubic-bezier(.22,1,.36,1),
             transform .2s ease,box-shadow .2s ease;
  overflow:hidden}
.wa-destek svg{flex:0 0 auto;width:30px;height:30px;margin:0 13px}
.wa-destek span{max-width:0;opacity:0;white-space:nowrap;font-size:14.5px;font-weight:600;
  transition:max-width .35s cubic-bezier(.22,1,.36,1),opacity .25s ease}
.wa-destek:hover,.wa-destek:focus-visible{text-decoration:none;transform:translateY(-2px);
  box-shadow:0 14px 38px rgba(37,211,102,.44),0 2px 8px rgba(18,40,63,.10)}
.wa-destek:hover span,.wa-destek:focus-visible span{max-width:260px;opacity:1;
  padding-inline-end:20px}
/* Nabız halkası — dikkat çeker ama rahatsız etmez */
.wa-destek::before{content:"";position:absolute;inset:0;border-radius:99px;
  border:2px solid #25d366;animation:waNabiz 2.8s ease-out infinite;pointer-events:none}
@keyframes waNabiz{0%{transform:scale(1);opacity:.7}
  70%{transform:scale(1.35);opacity:0}100%{opacity:0}}
@media (max-width:640px){
  .wa-destek{bottom:16px;inset-inline-end:16px;height:52px}
  .wa-destek svg{width:27px;height:27px;margin:0 12px}
  .wa-destek:hover span{max-width:0;opacity:0;padding-inline-end:0}
}

/* ---------- WhatsApp şablonları ---------- */
.bilgi-kart{border-color:#bcdcf3;background:#f2f9fe}
.uyari-kart{border-color:#e8d4a0;background:#fdf8ec}
.eksik-liste{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.eksik-rozet{background:#fbf1d9;border:1px solid #e3cb92;
  color:var(--sari);border-radius:99px;padding:5px 12px;font-size:13px}
.pencere-rozet{display:inline-flex;align-items:center;gap:6px;border-radius:99px;
  padding:3px 10px;font-size:12px;border:1px solid}
.pencere-rozet.acik{background:rgba(10,108,180,.12);border-color:rgba(10,108,180,.36);
  color:var(--vurgu)}
.pencere-rozet.kapali{background:rgba(242,193,78,.12);border-color:rgba(242,193,78,.36);
  color:var(--sari)}
.pencere-satir{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:8px 22px;border-top:1px solid var(--cizgi);background:var(--zemin2);
  font-size:13px;color:var(--soluk2)}
.pencere-satir a{color:var(--vurgu);font-size:13px}

/* ---------- Bakiye ---------- */
.bakiye-cubuk{height:7px;border-radius:99px;background:var(--zemin2);
  border:1px solid var(--cizgi);overflow:hidden;margin:4px 0 16px}
.bakiye-cubuk i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--vurgu-koyu),#3d9ad8);transition:width .5s cubic-bezier(.22,1,.36,1)}
.bakiye-kalan{color:var(--sari)}
.uclu{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:640px){ .uclu{grid-template-columns:1fr} }