/* ============================================================
   CreativeDad — site.css
   Tasarım sistemi: beyaz zemin · mor tek aksiyon rengi · pembe mikro-vurgu
   Başlık: Jost · Gövde: Poppins (marka fontu)
   ============================================================ */

/* ---------- 1. Token'lar ---------- */
:root{
  --kagit:      #ffffff;
  --kagit-2:    #f7f7fb;   /* alternatif bölüm zemini */
  --lila:       #eeeff9;   /* yumuşak vurgu bandı */
  --lila-2:     #dcdef3;   /* güçlü vurgu bandı */
  --murekkep:   #16172e;   /* ana metin */
  --murekkep-2: #4a4e6d;   /* ikincil metin */
  --murekkep-3: #676b83;   /* üçüncül / etiket — WCAG AA (5.2:1) */
  --mor:        #5c63b9;   /* marka moru — TÜM aksiyonlar */
  --mor-koyu:   #4a509d;
  --mor-acik:   #eceef8;
  --pembe:      #dc3c80;   /* marka pembesi — çizgi/dolgu için */
  --pembe-metin:#c62b6c;   /* açık zeminde METİN için — AA (4.8:1) */
  --pembe-acik: #ff7aa8;   /* koyu zeminde METİN için — AA (7.2:1) */
  --cizgi:      #e5e6ef;

  --kap:        1180px;    /* kapsayıcı genişliği */
  --r-kart:     16px;
  --r-btn:      9px;
  /* gölge hiyerarşisi: dinlenme → hover (yükselir) → aktif (basılır) */
  --golge:      0 1px 2px rgba(22,23,46,.04), 0 16px 44px -16px rgba(22,23,46,.16);
  --golge-yuk:  0 2px 6px rgba(22,23,46,.05), 0 26px 58px -18px rgba(92,99,185,.30);
  --golge-bas:  0 1px 2px rgba(22,23,46,.06), 0 8px 20px -12px rgba(22,23,46,.20);

  --gecis:      .22s cubic-bezier(.4,0,.2,1);
}

/* ---------- 2. Sıfırlama ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--kagit);
  color:var(--murekkep);
  font-family:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:1.0625rem;      /* 17px */
  line-height:1.72;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video,iframe{max-width:100%;display:block}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
ul,ol{margin:0;padding:0;list-style:none}

/* ---------- 3. Tipografi ---------- */
h1,h2,h3,h4,.baslik-fontu{
  font-family:"Jost","Poppins",system-ui,sans-serif;
  font-weight:600;
  letter-spacing:-.022em;
  line-height:1.14;
  color:var(--murekkep);
  margin:0 0 .5em;
  text-wrap:balance;
}
h1{font-size:clamp(1.95rem,1.25rem + 2.9vw,2.9rem)}
h2{font-size:clamp(1.6rem,1.15rem + 1.95vw,2.45rem)}
h3{font-size:clamp(1.12rem,1.02rem + .4vw,1.3rem);line-height:1.3}
h4{font-size:1.02rem;font-weight:500;line-height:1.4}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
strong,b{font-weight:600}

/* göz etiketi — bölümlerin üstündeki küçük yazı */
.etiket{
  font-family:"Jost",sans-serif;
  font-size:.775rem;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--mor);
  margin:0 0 12px;
  display:block;
}
.etiket--pembe{color:var(--pembe-metin)}
.form-sol .etiket--pembe{color:var(--pembe-acik)}

.giris{                       /* bölüm giriş paragrafı */
  font-size:1.09rem;
  color:var(--murekkep-2);
  max-width:62ch;
}
.kucuk{font-size:.9rem;color:var(--murekkep-3);line-height:1.6}
.vurgu{color:var(--pembe)}

/* kanıt altı çizgisi — pembe, sadece gerçek rakamların altında */
.alti-cizili{
  background-image:linear-gradient(transparent 62%, rgba(220,60,128,.22) 62%);
  background-repeat:no-repeat;
  padding:0 .05em;
}

/* ---------- 4. Yerleşim ---------- */
.kap{width:100%;max-width:var(--kap);margin-inline:auto;padding-inline:22px}
.bolum{padding:88px 0}
.bolum--sik{padding:64px 0}
.bolum--lila{background:var(--lila)}
.bolum--gri{background:var(--kagit-2)}
/* renkli bölümlerin üst/alt sınırında 1px iç çizgi — kesik geçiş hissini yumuşatır */
.bolum--lila,.bolum--gri{
  box-shadow:inset 0 1px 0 rgba(22,23,46,.035),inset 0 -1px 0 rgba(22,23,46,.035);
}
.bolum-basi{max-width:62ch;margin-bottom:48px}
.bolum-basi h2{margin-bottom:16px}   /* h2 → .giris arası 4px tabanlı ritim */
.bolum-basi--orta{margin-inline:auto;text-align:center}

.izgara{display:grid;gap:22px}
.izgara--2{grid-template-columns:repeat(2,1fr)}
.izgara--3{grid-template-columns:repeat(3,1fr)}

/* ---------- 5. Butonlar ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:"Jost",sans-serif;font-weight:600;font-size:.985rem;
  letter-spacing:-.005em;
  padding:13px 26px;border-radius:var(--r-btn);border:1.5px solid transparent;
  cursor:pointer;transition:var(--gecis);
  min-height:48px;text-align:center;
}
.btn--dolu{background:var(--mor);color:#fff;border-color:var(--mor)}
.btn--dolu:hover{background:var(--mor-koyu);border-color:var(--mor-koyu);transform:translateY(-1px);box-shadow:0 10px 24px -10px rgba(92,99,185,.65)}
.btn--cizgi{background:transparent;color:var(--murekkep);border-color:var(--cizgi)}
.btn--cizgi:hover{border-color:var(--mor);color:var(--mor);background:var(--mor-acik)}
.btn--wa{background:#12813f;color:#fff;border-color:#12813f}
.btn--wa:hover{background:#0d6631;border-color:#0d6631;transform:translateY(-1px)}
/* basılı durum — parmak altında hissedilir geri bildirim */
.btn:active{transform:translateY(0) scale(.985)}
.btn--dolu:active{box-shadow:0 4px 12px -8px rgba(92,99,185,.55)}
/* gönderim butonu odak halkası — dolgulu butonda outline'a ek yumuşak hale */
.btn--dolu:focus-visible{box-shadow:0 0 0 4px rgba(92,99,185,.22)}
.btn--genis{width:100%}
.btn--kucuk{padding:9px 18px;font-size:.9rem;min-height:40px}
.btn-satir{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* metin bağlantısı — oklu */
.ok-link{
  display:inline-block;
  font-family:"Jost",sans-serif;font-weight:500;font-size:.95rem;color:var(--mor);
  transition:var(--gecis);
  text-decoration:underline transparent;text-underline-offset:.3em;text-decoration-thickness:1.5px;
}
/* ok inline-block: alt çizgi yalnızca metnin altında kalır, oka taşmaz */
.ok-link::after{content:"→";display:inline-block;margin-left:.42em;transition:transform var(--gecis)}
.ok-link:hover{text-decoration-color:currentColor}
.ok-link:hover::after{transform:translateX(4px)}

/* ---------- 6. Kartlar ---------- */
.kart{
  background:var(--kagit);
  border:1px solid var(--cizgi);
  border-radius:var(--r-kart);
  padding:28px;
  box-shadow:var(--golge);
  transition:var(--gecis);
}
.kart--tikla:hover{transform:translateY(-4px);box-shadow:var(--golge-yuk);border-color:#cdd0e8}
.kart--tikla:active{transform:translateY(-1px);box-shadow:var(--golge-bas)}

/* ---------- 7. Üst bar ---------- */
.ust{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.93);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color var(--gecis),box-shadow var(--gecis);
}
.ust.kaydi{border-bottom-color:var(--cizgi);box-shadow:0 6px 24px -18px rgba(22,23,46,.5)}
.ust-ic{display:flex;align-items:center;gap:26px;height:74px}
.logo{display:flex;align-items:center;flex-shrink:0}
.logo img{height:34px;width:auto}
.menu{display:flex;gap:26px;margin-left:auto;align-items:center}
.menu a:not(.btn){
  font-family:"Jost",sans-serif;font-size:.965rem;font-weight:500;color:var(--murekkep-2);
  position:relative;padding:6px 0;transition:color var(--gecis);
}
.menu a:not(.btn):hover,.menu a:not(.btn)[aria-current="page"]{color:var(--murekkep)}
.menu a:not(.btn)::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--mor);transition:right var(--gecis);border-radius:2px;
}
.menu a:not(.btn):hover::after,.menu a:not(.btn)[aria-current="page"]::after{right:0}
.ust .btn{margin-left:6px}

.menu-ac{
  display:none;background:none;border:1px solid var(--cizgi);border-radius:8px;
  width:44px;height:44px;margin-left:auto;cursor:pointer;
  align-items:center;justify-content:center;flex-direction:column;gap:4px;
}
.menu-ac span{display:block;width:18px;height:1.8px;background:var(--murekkep);border-radius:2px;transition:var(--gecis)}
.menu-ac[aria-expanded="true"] span:nth-child(1){transform:translateY(5.8px) rotate(45deg)}
.menu-ac[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-ac[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.8px) rotate(-45deg)}

/* ---------- 8. Hero ---------- */
.hero{padding:64px 0 56px;position:relative}
.hero-izgara{display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center}
.hero h1{margin-bottom:.55em}
.hero .giris{font-size:1.12rem;margin-bottom:1.9em}
.hero-alt{margin-top:26px;font-size:.875rem;color:var(--murekkep-3);display:flex;flex-wrap:wrap;gap:6px 18px}
.hero-alt span{display:inline-flex;align-items:center;gap:.4em}
.hero-alt span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--mor);flex-shrink:0}

/* künye kartı — hero'nun kanıt paneli */
.kunye{
  background:var(--kagit);border:1px solid var(--cizgi);border-radius:var(--r-kart);
  box-shadow:var(--golge);overflow:hidden;
}
.kunye-ust{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 24px;background:var(--murekkep);color:#fff;
}
.kunye-ust h2,.kunye-ust p{margin:0}
.kunye-baslik{font-family:"Jost",sans-serif;font-size:.9rem;font-weight:500;letter-spacing:.03em;color:#fff}
.kunye-rozet{
  font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:#b9bdf0;border:1px solid rgba(255,255,255,.22);border-radius:99px;padding:3px 10px;
  white-space:nowrap;
}
.kunye-satir{display:flex;align-items:baseline;gap:16px;padding:19px 24px;border-bottom:1px solid var(--cizgi)}
.kunye-satir:last-of-type{border-bottom:0}
.kunye-sayi{
  font-family:"Jost",sans-serif;font-weight:600;font-size:2.1rem;line-height:1;
  letter-spacing:-.03em;color:var(--mor);min-width:3.6ch;
  font-variant-numeric:tabular-nums;
}
.kunye-etiket{font-size:.925rem;color:var(--murekkep-2);line-height:1.45}
.kunye-dip{padding:13px 24px;background:var(--kagit-2);font-size:.79rem;color:var(--murekkep-3);border-top:1px solid var(--cizgi)}

/* ---------- 9. Logo duvarı ---------- */
.duvar{padding:38px 0 46px;border-top:1px solid var(--cizgi);border-bottom:1px solid var(--cizgi);background:var(--kagit)}
.duvar-baslik{text-align:center;font-size:.83rem;letter-spacing:.11em;text-transform:uppercase;color:var(--murekkep-3);margin:0 0 26px;font-family:"Jost",sans-serif}
.serit{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.serit-ic{display:flex;gap:14px;width:max-content;animation:kay 46s linear infinite}
.serit:hover .serit-ic{animation-play-state:paused}
@keyframes kay{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marka-karo{
  flex:0 0 auto;width:172px;height:88px;
  display:flex;align-items:center;justify-content:center;
  background:var(--kagit);border:1px solid var(--cizgi);border-radius:12px;padding:16px;
}
.marka-karo img{max-height:44px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.62;transition:filter .25s ease,opacity .25s ease}
.marka-karo:hover img{filter:none;opacity:1}

/* ---------- 10. Teşhis bloğu (imza öğe) ---------- */
.teshis{
  display:grid;grid-template-columns:.92fr 1.08fr;gap:0;
  border:1px solid var(--cizgi);border-radius:var(--r-kart);overflow:hidden;
  background:var(--kagit);box-shadow:var(--golge);
}
.teshis-sol{background:var(--kagit-2);padding:34px 30px;border-right:1px solid var(--cizgi)}
.teshis-sol h3{font-size:1.16rem;margin-bottom:.3em}
.teshis-sol > p{font-size:.92rem;color:var(--murekkep-2);margin-bottom:22px}
.secenek{
  display:block;width:100%;text-align:left;cursor:pointer;
  background:var(--kagit);border:1px solid var(--cizgi);border-left:3px solid var(--cizgi);
  border-radius:10px;padding:14px 16px;margin-bottom:10px;
  font-family:"Jost",sans-serif;font-size:.965rem;font-weight:500;line-height:1.4;
  color:var(--murekkep-2);transition:var(--gecis);
}
.secenek:hover{border-color:#cdd0e8;border-left-color:var(--mor);color:var(--murekkep)}
.secenek[aria-selected="true"]{
  border-color:var(--mor);border-left-color:var(--mor);border-left-width:3px;
  background:var(--mor-acik);color:var(--murekkep);
}
.teshis-sag{padding:34px 32px;display:flex;flex-direction:column}
.teshis-panel{display:none}
.teshis-panel.aktif{display:block;animation:bel .3s ease both}
@keyframes bel{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.teshis-panel h4{
  font-family:"Jost",sans-serif;font-size:.77rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--pembe-metin);margin:0 0 .5em;
}
.teshis-panel h4 + p{font-size:1.02rem;color:var(--murekkep);margin-bottom:1.5em}
.teshis-panel .adimlar{margin:0 0 26px;display:grid;gap:11px}
.teshis-panel .adimlar li{
  position:relative;padding-left:26px;font-size:.945rem;color:var(--murekkep-2);line-height:1.55;
}
.teshis-panel .adimlar li::before{
  content:"";position:absolute;left:2px;top:.62em;width:9px;height:9px;
  border:2px solid var(--mor);border-radius:2px;
}
.teshis-dip{margin-top:auto;padding-top:8px}

/* ---------- 11. Hizmet kartları ---------- */
.hizmet-kart{display:flex;flex-direction:column;height:100%}
.hizmet-kart h3{margin-bottom:8px}
.hizmet-kart p{font-size:.945rem;color:var(--murekkep-2);margin-bottom:1.3em}
.hizmet-kart .ok-link{margin-top:auto}
.hizmet-ikon{
  width:42px;height:42px;border-radius:10px;background:var(--mor-acik);
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;
  color:var(--mor);
}
.hizmet-ikon svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ---------- 12. Rakam bandı ---------- */
.rakam-izgara{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.rakam{background:var(--kagit);border:1px solid var(--cizgi);border-radius:var(--r-kart);padding:30px 26px;box-shadow:var(--golge)}
.rakam .buyuk{
  font-family:"Jost",sans-serif;font-weight:600;font-size:clamp(2.3rem,1.6rem + 2.4vw,3.15rem);
  line-height:1;letter-spacing:-.035em;color:var(--murekkep);margin-bottom:8px;
  font-variant-numeric:tabular-nums;display:block;
}
.rakam .buyuk em{font-style:normal;color:var(--mor)}
.rakam h3{font-size:1.02rem;font-weight:600;margin-bottom:4px}
.rakam p{font-size:.9rem;color:var(--murekkep-2);margin:0}

/* ---------- 13. Vaka kartları ---------- */
.vaka{display:flex;flex-direction:column;height:100%;padding:0;overflow:hidden}
.vaka-ust{padding:24px 26px 0;display:flex;align-items:center;justify-content:space-between;gap:14px}
.vaka-logo{height:32px;width:auto;max-width:130px;object-fit:contain}
.vaka-sektor{font-size:.73rem;letter-spacing:.09em;text-transform:uppercase;color:var(--murekkep-3);font-family:"Jost",sans-serif;text-align:right;line-height:1.3}
.vaka-govde{padding:20px 26px 26px;display:flex;flex-direction:column;flex:1}
.vaka-govde h3{font-size:1.06rem;margin-bottom:8px}
.vaka-satir{margin-bottom:14px}
.vaka-satir:last-of-type{margin-bottom:0}
.vaka-satir dt{
  font-family:"Jost",sans-serif;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mor);margin-bottom:.25em;font-weight:500;
}
.vaka-satir dd{margin:0;font-size:.925rem;color:var(--murekkep-2);line-height:1.6}
.vaka-etiketler{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px;padding-top:16px;border-top:1px solid var(--cizgi)}
.rozet{
  font-size:.755rem;padding:4px 10px;border-radius:99px;
  background:var(--lila);color:var(--mor-koyu);font-weight:500;
}
.rozet--gecmis{background:#e8e8ea;color:var(--murekkep-2)}

/* ---------- 14. Video galerisi ---------- */
.video-izgara{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.video-kart{padding:0;overflow:hidden;display:flex;flex-direction:column}
.video-cerceve{
  position:relative;aspect-ratio:16/9;background:var(--murekkep);
  display:flex;align-items:center;justify-content:center;cursor:pointer;border:0;width:100%;padding:0;
}
.video-cerceve--dikey{aspect-ratio:9/16;max-height:520px}
.video-cerceve img{width:100%;height:100%;object-fit:cover;opacity:.72;transition:var(--gecis)}
.video-cerceve:hover img{opacity:.55}
.video-cerceve iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.oynat{
  position:absolute;width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.95);
  display:flex;align-items:center;justify-content:center;transition:var(--gecis);
  box-shadow:0 6px 22px rgba(0,0,0,.3);
}
.video-cerceve:hover .oynat{transform:scale(1.08);background:#fff}
.oynat::after{content:"";border-left:15px solid var(--mor);border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:4px}
.video-alt{padding:18px 22px 22px}
.video-alt h3{font-size:1rem;margin-bottom:4px}
.video-alt p{font-size:.86rem;color:var(--murekkep-3);margin:0}

/* marka logolu video kapağı (Instagram röportajları) */
.video-cerceve--marka{background:var(--murekkep)}
.video-marka-logo{
  width:auto!important;height:56px;object-fit:contain;
  filter:brightness(0) invert(1);opacity:.9;
}

/* yardımcılar — satır içi stil yerine */
.tablo-ust-bosluk{margin-top:44px}
.ortala{text-align:center}
.btn-satir--orta{justify-content:center}
.ust-bosluk-s{margin-top:18px}
.ust-bosluk-m{margin-top:30px}
.ust-bosluk-l{margin-top:32px}
.kap--dar{max-width:720px}
.kap--cokdar{max-width:640px}
.ozet--genis{max-width:none}
.kart--dar{max-width:820px}
.kart--koyu .btn-sar,.btn-sar{margin-top:auto;padding-top:6px}
.giris--orta{margin-inline:auto}
.ikincil{color:var(--murekkep-2)}
.h2--kucuk{font-size:1.3rem}
.ornek-logo{height:42px;width:auto;margin-bottom:20px}
.etiket-listesi{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.etiket-listesi a{
  display:inline-block;padding:8px 15px;border:1px solid var(--cizgi);border-radius:99px;
  font-size:.9rem;color:var(--murekkep-2);transition:var(--gecis);
}
.etiket-listesi a:hover{border-color:var(--mor);color:var(--mor);background:var(--mor-acik)}
.adres-blok{font-style:normal;line-height:1.75;color:var(--murekkep-2)}
.harita-sar{margin-top:34px;border-radius:var(--r-kart);overflow:hidden;border:1px solid var(--cizgi)}
.harita{width:100%;height:380px;border:0;display:block}

/* ---------- 15. Süreç (4 adım) ---------- */
.surec{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--cizgi);border-radius:var(--r-kart);overflow:hidden;background:var(--kagit)}
.adim{padding:30px 26px;border-right:1px solid var(--cizgi);position:relative}
.adim:last-child{border-right:0}
.adim-no{
  font-family:"Jost",sans-serif;font-size:.75rem;font-weight:600;letter-spacing:.12em;
  color:var(--mor);margin-bottom:14px;display:block;
}
.adim h3{font-size:1.06rem;margin-bottom:8px}
.adim p{font-size:.9rem;color:var(--murekkep-2);margin:0}
.adim::before{
  content:"";position:absolute;top:0;left:0;height:3px;width:100%;
  background:var(--mor);transform:scaleX(0);transform-origin:left;transition:transform .5s ease;
}
.adim.gorunur::before{transform:scaleX(1)}

/* koyu vurgu kartı — satır içi stil yerine sınıf */
.kart--koyu{background:var(--murekkep);border-color:var(--murekkep)}
.kart--koyu h3{color:#fff}
.kart--koyu p{color:#b6b9d4}
.kart--koyu .btn-sar{margin-top:auto;padding-top:6px}

/* fotoğraf yer tutucu */
.ph-kutu{
  aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;
  background:var(--lila);border-style:dashed;text-align:center;
}
.ph-kutu p{margin:0}

/* ---------- 16. Kıyas tablosu ---------- */
.tablo-sar{overflow-x:auto;border:1px solid var(--cizgi);border-radius:var(--r-kart);background:var(--kagit);
  -webkit-overflow-scrolling:touch}
.tablo-ipucu{display:none;font-size:.82rem;color:var(--murekkep-3);margin:10px 0 0;align-items:center;gap:.4em}
.tablo-ipucu::before{content:"↔";font-size:1.05rem;color:var(--mor)}
table.kiyas{width:100%;border-collapse:collapse;min-width:640px;font-size:.94rem}
table.kiyas th,table.kiyas td{padding:16px 20px;text-align:left;border-bottom:1px solid var(--cizgi);vertical-align:top}
table.kiyas thead th{
  font-family:"Jost",sans-serif;font-size:.8rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--murekkep-3);font-weight:500;background:var(--kagit-2);
}
table.kiyas thead th:last-child{color:var(--mor)}
table.kiyas tbody th{font-weight:600;font-family:"Jost",sans-serif;font-size:.95rem;width:22%}
table.kiyas td:last-child{background:rgba(92,99,185,.045);color:var(--murekkep);font-weight:500}
table.kiyas tr:last-child th,table.kiyas tr:last-child td{border-bottom:0}

/* ---------- 17. SSS ---------- */
.sss{max-width:820px;margin-inline:auto}
.sss-madde{
  border-bottom:1px solid var(--cizgi);
  border-left:2px solid transparent;   /* açık maddede mor şeride dönüşür — yerleşim kaymaz */
  transition:border-left-color var(--gecis),background-color var(--gecis);
}
.sss-madde:first-child{border-top:1px solid var(--cizgi)}
.sss-madde:hover{background-color:rgba(238,239,249,.55)}
.sss-madde:has(.sss-btn[aria-expanded="true"]){border-left-color:var(--mor)}
.sss-madde h3{margin:0}
.sss-btn{
  width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  background:none;border:0;padding:22px 4px;cursor:pointer;text-align:left;
  font-family:"Jost",sans-serif;font-size:1.06rem;font-weight:500;line-height:1.35;color:var(--murekkep);
}
.sss-btn:hover{color:var(--mor)}
.sss-isaret{
  flex-shrink:0;width:22px;height:22px;position:relative;margin-top:3px;
}
.sss-isaret::before,.sss-isaret::after{
  content:"";position:absolute;background:var(--mor);border-radius:2px;
  top:50%;left:50%;transform:translate(-50%,-50%);
}
.sss-isaret::before{width:13px;height:1.8px}
.sss-isaret::after{width:1.8px;height:13px;transition:transform var(--gecis)}
.sss-btn[aria-expanded="true"] .sss-isaret::after{transform:translate(-50%,-50%) scaleY(0)}
.sss-cevap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s ease}
.sss-cevap[data-acik="true"]{grid-template-rows:1fr}
.sss-cevap > div{overflow:hidden}
.sss-cevap p{padding:0 4px 24px;margin:0;font-size:.975rem;color:var(--murekkep-2);max-width:70ch}

/* ---------- 18. Form ---------- */
.form-blok{
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  border-radius:var(--r-kart);overflow:hidden;border:1px solid var(--cizgi);box-shadow:var(--golge);
}
.form-sol{padding:44px 40px;background:var(--murekkep);color:#fff}
.form-sol h2{color:#fff;margin-bottom:.45em}
.form-sol p{color:#b6b9d4;font-size:.98rem}
.form-liste{margin-top:26px;display:grid;gap:13px}
.form-liste li{position:relative;padding-left:27px;font-size:.94rem;color:#d5d7e8;line-height:1.55}
.form-liste li::before{
  content:"";position:absolute;left:0;top:.46em;width:15px;height:9px;
  border-left:2px solid var(--pembe-acik);border-bottom:2px solid var(--pembe-acik);
  transform:rotate(-45deg);
}
.form-iletisim{margin-top:32px;padding-top:24px;border-top:1px solid rgba(255,255,255,.14);font-size:.9rem;color:#b6b9d4}
.form-iletisim a{color:#fff;border-bottom:1px solid rgba(255,255,255,.3)}
.form-iletisim a:hover{border-bottom-color:#fff}

.form-sag{padding:44px 40px;background:var(--kagit)}
.alan{margin-bottom:18px}
.alan label{display:block;font-family:"Jost",sans-serif;font-size:.875rem;font-weight:500;margin-bottom:7px;color:var(--murekkep)}
.alan input,.alan select{
  width:100%;padding:13px 15px;border:1.5px solid var(--cizgi);border-radius:var(--r-btn);
  font-family:inherit;font-size:1rem;color:var(--murekkep);background:var(--kagit);
  transition:var(--gecis);min-height:50px;
}
.alan select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237b7f9c' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center;padding-right:40px}
.alan input:hover,.alan select:hover{border-color:#cdd0e8}
.alan input:focus,.alan select:focus{outline:none;border-color:var(--mor);box-shadow:0 0 0 3px rgba(92,99,185,.14)}
.alan input::placeholder{color:#a9adc4}
.form-not{font-size:.83rem;color:var(--murekkep-3);margin-top:14px;line-height:1.55}
.alan--hata input,.alan--hata select,
.alan--hata input:hover,.alan--hata select:hover{border-color:var(--pembe-metin);background:#fff6fa}
.hata-metni{display:none;font-size:.84rem;color:var(--pembe-metin);margin:7px 0 0;line-height:1.4}
.alan--hata .hata-metni{display:block}
.bal{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- 19. Alt bilgi ---------- */
.alt{background:var(--murekkep);color:#a8abc6;padding:64px 0 0;font-size:.93rem}
.alt-izgara{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:48px}
.alt h3,.alt-baslik{color:#fff;font-size:.83rem;letter-spacing:.12em;text-transform:uppercase;font-weight:500;margin:0 0 18px;font-family:"Jost",sans-serif}
.alt a{color:#a8abc6;transition:color var(--gecis)}
.alt a:hover{color:#fff}
.alt li{margin-bottom:9px}
.alt-logo img{height:32px;width:auto;margin-bottom:18px;filter:brightness(0) invert(1)}
.alt-adres{font-style:normal;line-height:1.75}
.alt-sosyal{display:flex;gap:10px;margin-top:18px}
.alt-sosyal a{
  width:38px;height:38px;border:1px solid rgba(255,255,255,.16);border-radius:9px;
  display:flex;align-items:center;justify-content:center;transition:var(--gecis);
}
.alt-sosyal a:hover{background:var(--mor);border-color:var(--mor)}
.alt-sosyal svg{width:17px;height:17px;fill:currentColor}
.alt-dip{
  border-top:1px solid rgba(255,255,255,.11);padding:22px 0;
  display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;font-size:.85rem;
}

/* ---------- 20. Mobil sabit çubuk ---------- */
.mobil-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;
  background:rgba(255,255,255,.97);backdrop-filter:blur(12px);
  border-top:1px solid var(--cizgi);padding:9px 12px;gap:9px;
  padding-bottom:calc(9px + env(safe-area-inset-bottom));
}
.mobil-bar .btn{flex:1;padding:11px 10px;font-size:.9rem;min-height:46px}

/* ---------- 21. İçerik sayfaları ---------- */
.sayfa-basi{padding:52px 0 40px;border-bottom:1px solid var(--cizgi);background:var(--kagit-2)}
.kirinti{font-size:.83rem;color:var(--murekkep-3);margin-bottom:18px;display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.kirinti a:hover{color:var(--mor)}
.kirinti span[aria-current]{color:var(--murekkep-2)}
.metin{max-width:74ch}
.metin h2{margin-top:1.9em}
.metin h2:first-child{margin-top:0}
.metin h3{margin-top:1.5em;font-size:1.13rem}
.metin ul{margin:0 0 1.3em;display:grid;gap:9px}
.metin ul li{position:relative;padding-left:24px;color:var(--murekkep-2)}
.metin ul li::before{content:"";position:absolute;left:3px;top:.66em;width:7px;height:7px;border-radius:2px;background:var(--mor)}
.ozet{
  background:var(--lila);border-left:3px solid var(--mor);
  border-radius:0 12px 12px 0;padding:24px 28px;margin:0 0 36px;
}
.ozet h2{font-size:.79rem!important;letter-spacing:.14em;text-transform:uppercase;color:var(--mor);margin:0 0 12px!important;font-weight:500}
.ozet ul{margin:0;gap:9px}
.ozet ul li{color:var(--murekkep);font-size:.955rem}
.ozet ul li::before{background:var(--pembe)}
.guncelleme{font-size:.83rem;color:var(--murekkep-3);margin-top:44px;padding-top:20px;border-top:1px solid var(--cizgi)}

/* ---------- 22. Hareket ---------- */
[data-bel]{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1)}
[data-bel].gorunur{opacity:1;transform:none}

/* ---------- 23. Erişilebilirlik ---------- */
:focus-visible{outline:2.5px solid var(--pembe);outline-offset:3px;border-radius:4px}
.atla{
  position:absolute;left:14px;top:-70px;z-index:100;background:var(--mor);color:#fff;
  padding:11px 18px;border-radius:0 0 9px 9px;transition:top .18s ease;font-size:.92rem;
}
.atla:focus{top:0}
.gizli{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  [data-bel]{opacity:1;transform:none}
  .serit-ic{animation:none}
}

/* ============================================================
   24. Duyarlılık — önce mobil kontrolü (trafiğin çoğu Instagram)
   ============================================================ */
@media (max-width:1000px){
  .hero-izgara{grid-template-columns:1fr;gap:38px}
  .teshis{grid-template-columns:1fr}
  .teshis-sol{border-right:0;border-bottom:1px solid var(--cizgi)}
  .surec{grid-template-columns:repeat(2,1fr)}
  .adim:nth-child(2){border-right:0}
  .adim:nth-child(-n+2){border-bottom:1px solid var(--cizgi)}
  .form-blok{grid-template-columns:1fr}
  .alt-izgara{grid-template-columns:repeat(2,1fr);gap:34px}
}

@media (max-width:860px){
  .menu,.ust .btn{
    display:none;
  }
  .menu-ac{display:flex}
  .ust.acik .menu{
    display:flex;position:absolute;top:74px;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--kagit);border-bottom:1px solid var(--cizgi);
    padding:8px 22px 22px;box-shadow:0 20px 40px -22px rgba(22,23,46,.5);
    margin-left:0;
  }
  .ust.acik .menu a:not(.btn){padding:14px 0;border-bottom:1px solid var(--cizgi);font-size:1.02rem}
  .ust.acik .menu a:not(.btn)::after{display:none}
  .ust.acik .btn{display:inline-flex;margin:16px 0 0}
  body{padding-bottom:66px}
  .mobil-bar{display:flex}
  .izgara--3,.rakam-izgara,.video-izgara{grid-template-columns:repeat(2,1fr)}
  .tablo-ipucu{display:flex}
  .bolum{padding:62px 0}
  .bolum--sik{padding:48px 0}
}

@media (max-width:640px){
  body{font-size:1.02rem}
  .kap{padding-inline:18px}
  .izgara--2,.izgara--3,.rakam-izgara,.video-izgara{grid-template-columns:1fr}
  .surec{grid-template-columns:1fr}
  .adim{border-right:0;border-bottom:1px solid var(--cizgi)}
  .adim:last-child{border-bottom:0}
  .adim:nth-child(-n+2){border-bottom:1px solid var(--cizgi)}
  .alt-izgara{grid-template-columns:1fr;gap:30px}
  .form-sol,.form-sag{padding:32px 24px}
  .teshis-sol,.teshis-sag{padding:26px 22px}
  .kart{padding:24px}
  .hero{padding:40px 0 44px}
  .bolum-basi{margin-bottom:34px}
  .btn{width:100%}
  .btn-satir{flex-direction:column;align-items:stretch}
  .btn-satir .btn{width:100%}
  .mobil-bar .btn{width:auto}
  .kunye-satir{padding:16px 20px}
  .kunye-sayi{font-size:1.85rem}
  .marka-karo{width:142px;height:76px}
}

/* ============================================================
   25. Hero kolajı — sol metin + sağda röportaj video mozaiği
   ============================================================ */
.hero{padding:56px 0 72px}
.hero-izgara{grid-template-columns:1fr 1.06fr;gap:52px}

/* fosforlu işaretleme — başlığın ikinci satırının altı */
.isaretli{
  background-image:linear-gradient(transparent 58%, #ffd84d 58%, #ffd84d 94%, transparent 94%);
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  padding:0 .08em;margin:0 -.08em;
}

/* üst üste binen marka pulları + "+170" hapı */
.marka-cipler{display:flex;align-items:center;margin-top:28px;flex-wrap:wrap;gap:10px 0}
.cip{
  width:52px;height:52px;border-radius:50%;background:#fff;
  border:1.5px solid var(--cizgi);display:flex;align-items:center;justify-content:center;
  overflow:hidden;margin-left:-13px;box-shadow:0 2px 10px rgba(22,23,46,.09);flex-shrink:0;
}
.cip:first-child{margin-left:0}
.cip img{max-width:66%;max-height:58%;object-fit:contain}
.cip-pill{
  margin-left:14px;display:inline-flex;align-items:center;
  font-family:"Jost",sans-serif;font-weight:600;font-size:.9rem;color:var(--mor-koyu);
  background:#fff;border:1.5px solid var(--lila-2);border-radius:99px;
  padding:11px 18px;transition:var(--gecis);
}
.cip-pill:hover{border-color:var(--mor);color:var(--mor);background:var(--mor-acik)}

/* video mozaiği */
.kolaj{position:relative;display:grid;grid-template-columns:1fr 1.28fr 1fr;gap:16px;align-items:center}
.kolaj-sut{display:grid;gap:16px}
.kolaj-sut--a{transform:translateY(20px)}
.kolaj-sut--b{align-self:center}
.kolaj-sut--c{transform:translateY(-16px)}
.kolaj .video-cerceve{
  border-radius:18px;overflow:hidden;border:1px solid var(--cizgi);
  box-shadow:var(--golge);width:100%;
  transition:transform var(--gecis),box-shadow var(--gecis);
}
.kolaj .video-cerceve:hover{transform:scale(1.02);box-shadow:var(--golge-yuk)}
.kolaj .video-cerceve:active{transform:scale(1.005);box-shadow:var(--golge-bas)}
.kolaj .video-cerceve--dikey{aspect-ratio:9/16;max-height:none}
.kolaj .video-cerceve--orta{aspect-ratio:9/14}
.kolaj .video-cerceve--orta img{width:100%;height:100%;object-fit:cover}
.kolaj .oynat{width:48px;height:48px}
.kolaj .oynat::after{border-left-width:12px;border-top-width:7px;border-bottom-width:7px}
.kolaj-cta{
  aspect-ratio:9/11;background:var(--lila);border:1px solid var(--lila-2);border-radius:18px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  text-align:center;padding:16px;
}
.kolaj-cta-b{font-family:"Jost",sans-serif;font-weight:600;font-size:1.02rem;color:var(--murekkep);margin:0;line-height:1.3}

/* mozaik üstünde yüzen sayaç kartları */
.puf-sar{position:absolute;inset:0;pointer-events:none;z-index:3}
.puf{
  position:absolute;pointer-events:auto;background:#fff;
  border:1px solid rgba(22,23,46,.05);border-radius:15px;
  box-shadow:0 14px 44px -10px rgba(22,23,46,.32);padding:14px 20px 15px;white-space:nowrap;
  transition:transform var(--gecis),box-shadow var(--gecis);
}
.puf:hover{transform:translateY(-1px);box-shadow:0 18px 50px -10px rgba(22,23,46,.36)}
.puf-l{
  display:block;font-family:"Poppins",sans-serif;font-size:.7rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--murekkep-3);margin-bottom:3px;
}
.puf-b{
  font-family:"Poppins",sans-serif;font-weight:700;font-size:1.55rem;line-height:1.1;
  color:#111213;font-variant-numeric:tabular-nums;letter-spacing:-.01em;
}
/* yeşil artış rozeti — YALNIZCA gerçek panel verisiyle doldurulur */
.puf-artis{
  display:inline-flex;align-items:center;gap:.28em;margin-left:.5em;
  font-family:"Poppins",sans-serif;font-weight:600;font-size:.82rem;color:#108043;
  vertical-align:2px;
}
.puf-artis::before{
  content:"";width:0;height:0;
  border-left:4.5px solid transparent;border-right:4.5px solid transparent;
  border-bottom:7px solid #108043;
}
.puf--1{left:-20px;top:47%}
.puf--2{right:-14px;top:37%}   /* CTA kartının değil, sağdaki videonun üstünde durur */
.puf--3{left:27%;bottom:-16px}

@media (max-width:1000px){
  .hero{padding:44px 0 60px}
  .hero-izgara{grid-template-columns:1fr}  /* yukarıdaki masaüstü kuralı medya sorgusunu ezmesin */
  .kolaj{margin-top:6px}
}
@media (max-width:640px){
  .kolaj{grid-template-columns:repeat(3,1fr);gap:10px}
  .kolaj-sut{gap:10px}
  .kolaj-sut--a{transform:translateY(12px)}
  .kolaj-sut--c{transform:translateY(-8px)}
  .kolaj .video-cerceve--orta{aspect-ratio:9/15}
  .kolaj .oynat{width:38px;height:38px}
  /* mobilde kartlar akışa girer — ızgarada tam satırı kaplasın ki taşmasın */
  .puf-sar{position:static;grid-column:1/-1;display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
  .puf{position:static;flex:1 1 145px;white-space:normal}
  .puf-b{font-size:1.3rem}
  .cip{width:44px;height:44px;margin-left:-11px}
}

/* ============================================================
   26. ikas Partner sayfası — ikas neon kimliği
   ============================================================ */
:root{--ikas:#d6ff00;--ikas-murekkep:#0c0e05;--ikas-golge:#262b06}
.ikas-hero{background:var(--ikas);padding:64px 0 68px}
.ikas-hero .kirinti,.ikas-hero .kirinti a,.ikas-hero .kirinti span[aria-current]{color:var(--ikas-golge)}
.ikas-hero .kirinti a:hover{color:var(--ikas-murekkep)}
.ikas-lockup{display:flex;align-items:center;gap:20px;margin:26px 0 30px;flex-wrap:wrap}
.ikas-lockup img{height:46px;width:auto}
.ikas-x{font-family:"Jost",sans-serif;font-size:1.7rem;font-weight:600;color:var(--ikas-murekkep)}
.ikas-hero h1{color:var(--ikas-murekkep);max-width:20ch}
.ikas-hero .giris{color:var(--ikas-golge);font-size:1.12rem}
.ikas-rozet{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:"Jost",sans-serif;font-size:.78rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ikas-murekkep);
  border:1.5px solid var(--ikas-murekkep);border-radius:99px;padding:7px 16px;
}
.btn--siyah{background:var(--ikas-murekkep);color:#fff;border-color:var(--ikas-murekkep)}
.btn--siyah:hover{background:#000;border-color:#000;transform:translateY(-1px)}
.ikas-hero .btn--cizgi{border-color:rgba(12,14,5,.35);color:var(--ikas-murekkep)}
.ikas-hero .btn--cizgi:hover{border-color:var(--ikas-murekkep);background:rgba(255,255,255,.35);color:var(--ikas-murekkep)}
.ikas-kart-ikon{
  width:42px;height:42px;border-radius:10px;background:var(--ikas);
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;
  font-family:"Jost",sans-serif;font-weight:600;font-size:1.05rem;color:var(--ikas-murekkep);
}

/* hero kolajı: sessiz önizleme döngüleri */
.video-cerceve video{width:100%;height:100%;object-fit:cover;display:block}
.video-cerceve:hover video{opacity:.85}

/* Shopify tarzı sipariş bildirimi kartı */
.puf--bildirim{
  display:flex;align-items:center;gap:11px;padding:12px 18px 12px 13px;
  animation:bildirimGel .55s cubic-bezier(.2,.9,.3,1.2) 1.1s both;
}
.bildirim-ikon{
  width:34px;height:34px;border-radius:50%;background:#108043;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.bildirim-metin{display:flex;flex-direction:column;line-height:1.3}
.bildirim-metin b{font-family:"Poppins",sans-serif;font-weight:600;font-size:.93rem;color:#111213}
.bildirim-metin span{font-size:.78rem;color:var(--murekkep-3)}
@keyframes bildirimGel{
  from{opacity:0;transform:translateY(10px) scale(.95)}
  to{opacity:1;transform:none}
}
/* kolaj altındaki veri kaynağı notu */
/* Kolaj sarmalayıcısı: yüzen kartlar (.puf-sar) yalnızca video alanını kaplar,
   veri notu ızgaranın dışında kaldığı için artık kartların altında kalmaz. */
.kolaj-sar{display:flex;flex-direction:column}
/* Kolajın görsel taşmaları: sol sütun +20px kaydırılmış, bildirim kartı 16px
   aşağı sarkıyor. Bu pay onların kapladığı yeri rezerve eder. */
.kolaj{margin-bottom:26px}
.kolaj-veri-notu{text-align:center;margin:16px 0 0;font-size:.78rem}
@media (max-width:640px){
  .kolaj{margin-bottom:0}      /* mobilde kartlar akışa girer */
  /* bildirim kartının giriş animasyonu 10px aşağıdan başlıyor; pay onu da karşılar */
  .kolaj-veri-notu{margin-top:26px}
}
@media (prefers-reduced-motion:reduce){
  .puf--bildirim{animation:none}
}
@media (max-width:640px){
  .puf--bildirim{flex:1 1 100%}
}

/* ---------- KVKK onay kutusu ---------- */
.onay-alan{margin-bottom:18px}
.alan label.onay,.onay{display:flex;gap:11px;align-items:flex-start;cursor:pointer;font-size:.88rem;font-weight:400;color:var(--murekkep-2);line-height:1.5;margin-bottom:0}
.onay input{
  width:20px;height:20px;min-height:20px;flex-shrink:0;padding:0;border-radius:4px;
  margin:2px 0 0;accent-color:var(--mor);cursor:pointer;
}
.onay a{color:var(--mor);text-decoration:underline;text-underline-offset:.2em}
.onay a:hover{color:var(--mor-koyu)}
.form-sol .onay{color:#c9cce0}
.form-sol .onay a{color:#fff}
.alan--hata .onay span{color:var(--pembe-metin)}

/* ---------- Röportaj galerisi: 4 dikey video tek sırada ---------- */
.video-izgara{grid-template-columns:repeat(4,1fr);gap:18px}
.video-izgara .video-cerceve--dikey{max-height:none}
.video-izgara .video-alt{padding:14px 16px 18px}
.video-izgara .video-alt h3{font-size:.92rem;line-height:1.35;margin-bottom:.3em}
.video-izgara .video-alt p{font-size:.78rem}
.video-izgara .oynat{width:44px;height:44px}
.video-izgara .oynat::after{border-left-width:11px;border-top-width:7px;border-bottom-width:7px}

@media (max-width:1000px){
  .video-izgara{gap:14px}
  .video-izgara .video-alt{padding:12px 13px 15px}
  .video-izgara .video-alt h3{font-size:.85rem}
}
@media (max-width:860px){
  .video-izgara{grid-template-columns:repeat(2,1fr);gap:16px}
  .video-izgara .video-alt h3{font-size:.95rem}
}
@media (max-width:640px){
  .video-izgara{grid-template-columns:repeat(2,1fr);gap:12px}
  .video-izgara .video-alt{padding:11px 12px 14px}
  .video-izgara .video-alt h3{font-size:.83rem}
  .video-izgara .video-alt p{font-size:.73rem}
  .video-izgara .oynat{width:36px;height:36px}
  .video-izgara .oynat::after{border-left-width:9px;border-top-width:6px;border-bottom-width:6px}
}