/* 07 · Küçük ama işe yarayan araçlar — artboards 6a (1440) / 6b (375), fluid in between */
#araclar{
  --ar-ink:#17202A;
  position:relative;
  padding:clamp(48px, calc(36.73px + 3.005vw), 80px) 16px clamp(40px, calc(28.73px + 3.005vw), 72px);
  background:#fff;
  display:flex;flex-direction:column;align-items:center;
  font-family:var(--font-body,'Inter',sans-serif);color:var(--ar-ink);
  -webkit-font-smoothing:antialiased;
}
#araclar *,#araclar *::before,#araclar *::after{box-sizing:border-box}
#araclar p{margin:0}

#araclar .ar-h2{
  margin:0 8px;font-family:var(--font-display,'Manrope',sans-serif);font-weight:800;letter-spacing:-0.03em;
  font-size:clamp(30px, calc(24.37px + 1.502vw), 46px);line-height:1.1;color:var(--ar-ink);text-align:center;text-wrap:balance;
}

/* bento grid: 6 tracks — row 1 = 2 cards × 3 tracks, row 2 = 3 cards × 2 tracks; single column on small screens */
#araclar .ar-bento{
  margin-top:clamp(28px, calc(22.37px + 1.502vw), 44px);width:min(1200px,100%);
  display:grid;grid-template-columns:1fr;gap:clamp(16px, calc(14.59px + 0.376vw), 20px);
}
@media (min-width:860px){
  #araclar .ar-bento{grid-template-columns:repeat(6,minmax(0,1fr))}
  #araclar .ar-card{grid-column:span 2}
  #araclar .ar-card-big{grid-column:span 3;padding:28px;min-height:400px}
  #araclar .ar-card-big .ar-card-title{font-size:26px}
}

/* tinted card */
#araclar .ar-card{
  position:relative;margin:0;border-radius:26px;
  background:radial-gradient(120% 90% at 15% 0%,#fff6 0%,transparent 55%),var(--tint);
  box-shadow:inset 0 0 0 1px rgba(20,40,60,.05),inset 0 1px 0 rgba(255,255,255,.7);
  padding:24px;display:flex;flex-direction:column;gap:6px;overflow:hidden;min-width:0;
}
#araclar .ar-card-title{margin:0;font-family:var(--font-display,'Manrope',sans-serif);font-weight:800;letter-spacing:-0.03em;font-size:23px;line-height:normal;color:var(--ar-ink)}
#araclar .ar-card-text{margin:0 0 54px;font-size:15px;line-height:1.5;color:#4B5563;padding-right:80px}
#araclar .ar-card-ui{position:relative;flex:1;display:flex;flex-direction:column;margin-top:auto}
#araclar .ar-mini{
  position:relative;flex:1;border-radius:16px;background:linear-gradient(180deg,#FFFFFF,#F8FAFC);
  box-shadow:0 0 0 1px rgba(20,40,60,.06),0 2px 4px rgba(20,40,60,.04),0 14px 30px -10px rgba(20,40,60,.12);
  padding:22px 20px 20px;display:flex;flex-direction:column;gap:10px;min-width:0;
}
#araclar .ar-sticker{position:absolute;right:-16px;top:-50px;width:92px;height:92px;filter:drop-shadow(0 8px 12px rgba(20,40,60,.18));pointer-events:none}
#araclar .ar-sticker svg{width:100%;height:100%;display:block;overflow:visible}

/* card 1 — cost table */
#araclar .ar-kicker{font-size:12px;font-weight:700;color:#6B7280;text-transform:uppercase;letter-spacing:.08em;padding-right:60px}
#araclar .ar-row{display:flex;justify-content:space-between;font-size:14px;padding:8px 0;color:var(--ar-ink);border-top:1px solid rgba(20,40,60,.06)}
#araclar .ar-row:first-child{border-top:0}
#araclar .ar-row-val{font-weight:600;font-variant-numeric:tabular-nums}
#araclar .ar-total{display:flex;justify-content:space-between;padding:10px 12px;border-radius:10px;background:linear-gradient(180deg,#E3EEF2,#D6E7ED);font-size:14px;font-weight:700;color:#0E6B84}
#araclar .ar-source{margin-top:auto;padding-top:6px;font-size:12px;color:#6B7280}

/* card 2 — countdown + calendar */
#araclar .ar-big{font-family:var(--font-display,'Manrope',sans-serif);font-weight:800;letter-spacing:-0.03em;font-size:30px;line-height:1.05;color:var(--ar-ink);padding-right:60px}
#araclar .ar-sub{font-size:14px;color:#6B7280}
#araclar .ar-month{margin-top:6px;font-size:11px;font-weight:700;color:#6B7280;text-transform:uppercase;letter-spacing:.08em}
#araclar .ar-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;max-width:230px}
#araclar .ar-dow{font-size:10px;font-weight:700;color:#A0AAB4;text-align:center}
#araclar .ar-day{height:22px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:500;color:#6B7280;border-radius:50%}
#araclar .ar-day-hot{font-weight:700;color:#fff;background:#E0357A;box-shadow:0 3px 8px rgba(224,53,122,.35)}

/* card 3 — blocked account */
#araclar .ar-amount{font-family:var(--font-display,'Manrope',sans-serif);font-weight:800;letter-spacing:-0.03em;font-size:34px;line-height:1;color:var(--ar-ink);padding-right:60px}
#araclar .ar-line{font-size:13.5px;color:var(--ar-ink);padding-top:4px}
#araclar .ar-ok{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:#1F7A4F}
#araclar .ar-ok-dot{width:8px;height:8px;border-radius:50%;background:#1F7A4F;box-shadow:0 0 0 3px rgba(31,122,79,.18);flex:none}

/* card 4 — parent view */
#araclar .ar-spacer-28{height:28px}
#araclar .ar-spacer-8{height:8px}
#araclar .ar-person{display:flex;align-items:center;gap:10px}
#araclar .ar-avatar{flex:none;width:34px;height:34px;border-radius:50%;background:linear-gradient(160deg,#FFB65E,#EE5A17);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:14px}
#araclar .ar-person-text{font-size:13.5px;line-height:1.35;color:var(--ar-ink)}
#araclar .ar-bar{height:8px;border-radius:4px;background:linear-gradient(180deg,#E9EDF1,#F4F6F8);box-shadow:inset 0 1px 2px rgba(20,40,60,.10)}
#araclar .ar-bar-fill{width:37.5%;height:100%;border-radius:4px;background:linear-gradient(180deg,#0E6B84,#0E6B84 55%,rgba(0,0,0,.15)),#0E6B84;box-shadow:0 2px 6px #0E6B8466}
#araclar .ar-deadline{font-size:13px;color:#6B7280}

/* card 5 — WhatsApp */
#araclar .ar-bubble{padding:9px 12px;font-size:13px;line-height:1.4;color:var(--ar-ink)}
#araclar .ar-bubble-out{align-self:flex-end;max-width:70%;border-radius:12px 12px 2px 12px;background:#DCF8C6}
#araclar .ar-bubble-in{align-self:flex-start;max-width:100%;border-radius:12px 12px 12px 2px;background:#F1F3F5}

/* CTA */
#araclar .ar-cta{margin-top:clamp(32px, calc(27.77px + 1.127vw), 44px)}
#araclar .ar-btn{
  height:clamp(44px, calc(43.30px + 0.188vw), 46px);padding:0 24px;border-radius:var(--radius-pill,999px);
  background:linear-gradient(180deg,#17202A 0%,#17202A 60%,rgba(0,0,0,.12) 100%),#17202A;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 6px 14px -4px #17202A99,0 1px 2px rgba(0,0,0,.15);
  display:inline-flex;align-items:center;gap:8px;color:#fff;
  font-size:clamp(14px, calc(13.65px + 0.094vw), 15px);font-weight:600;letter-spacing:-0.01em;line-height:1;
  text-decoration:none;white-space:nowrap;cursor:pointer;transition:transform .15s ease,filter .15s ease;
}
#araclar .ar-btn svg{width:12px;height:12px;flex:none}
#araclar .ar-btn:hover{filter:brightness(1.12)}
#araclar .ar-btn:active{transform:translateY(1px)}
#araclar .ar-btn:focus-visible{outline:3px solid #0E6B84;outline-offset:3px}

/* ---- motion (ANIM-D). Transform / opacity only; everything below is skipped under reduced motion ---- */
@media (prefers-reduced-motion:no-preference){
  /* card reveal keeps the shared timing; the hover lift rides on the separate `translate` property so it stays under 200 ms */
  #araclar .ar-card[data-reveal]{transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1),translate .18s ease-out}
  @media (hover:hover){#araclar .ar-card:hover{translate:0 -6px}}
  /* stickers float; paused while the section is off screen */
  #araclar .ar-sticker svg{will-change:transform}
  #araclar .ar-card.is-in .ar-sticker svg{animation:ar-float 4.6s ease-in-out infinite;animation-play-state:paused}
  #araclar.is-live .ar-card.is-in .ar-sticker svg{animation-play-state:running}
  #araclar .ar-card-cal .ar-sticker svg{animation-delay:-1.1s;animation-duration:4.1s}
  #araclar .ar-card-visa .ar-sticker svg{animation-delay:-2.3s;animation-duration:5s}
  #araclar .ar-card-parent .ar-sticker svg{animation-delay:-.7s;animation-duration:4.4s}
  #araclar .ar-card-wa .ar-sticker svg{animation-delay:-3.1s;animation-duration:4.8s}
  @keyframes ar-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
  /* calendar: the circled days pulse once */
  #araclar .ar-card.is-in .ar-day-hot{animation:ar-pulse .7s cubic-bezier(.2,.7,.2,1) .7s 1 both}
  #araclar .ar-card.is-in .ar-day-hot ~ .ar-day-hot{animation-delay:.95s}
  @keyframes ar-pulse{0%{transform:scale(1)}40%{transform:scale(1.3)}100%{transform:scale(1)}}
  /* parent view: progress bar fills to 3/8 */
  #araclar .ar-card[data-reveal] .ar-bar-fill{transform-origin:0 50%;transform:scaleX(0);transition:transform .8s cubic-bezier(.2,.7,.2,1) .5s}
  #araclar .ar-card.is-in .ar-bar-fill{transform:scaleX(1)}
  /* WhatsApp: bubbles appear one after the other */
  #araclar .ar-card[data-reveal] .ar-bubble{opacity:0;transform:translateY(8px) scale(.94);transition:opacity .3s ease-out,transform .4s cubic-bezier(.2,.7,.2,1)}
  #araclar .ar-card[data-reveal] .ar-bubble-out{transform-origin:100% 100%;transition-delay:.45s}
  #araclar .ar-card[data-reveal] .ar-bubble-in{transform-origin:0 100%;transition-delay:1.3s}
  #araclar .ar-card.is-in .ar-bubble{opacity:1;transform:none}
}