/* ============================================================
   aklar® — sayfa düzenleri
   /ara /ilanlar /ilan /calisan /danismanlik /danisman
   /ilan-ver /kayit /giris /profil /hesap /yonetim
   tokens.css ve app.css'ten sonra yüklenir.
   ============================================================ */

/* ---------- sayfa başlığı ---------- */
.pagehead{padding:28px 0 20px}
.crumbs{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--muted);
  margin-bottom:13px;flex-wrap:wrap}
.crumbs a:hover{color:var(--ink);text-decoration:underline}
.crumbs i{font-style:normal;opacity:.5}
.pagehead h1{font-size:clamp(26px,3.2vw,38px);font-weight:800;letter-spacing:-.035em;
  color:var(--ink);line-height:1.1;margin-bottom:8px}
.pagehead h1 span{color:var(--muted);font-weight:600}
.pagehead .lede{font-size:15.5px;color:var(--muted);max-width:66ch}
.pagehead .lede a{color:var(--link);font-weight:600}
.pagehead .lede a:hover{text-decoration:underline}
/* Tek bir mesleğe süzülmüş liste: başlık o mesleğin aksan rengini alır.
   Kartlardaki renkle aynı — kullanıcı hangi kategoride olduğunu renkten
   de anlar. Zemin %6 karışım, metin rengine dokunulmuyor. */
.pagehead.tinted{background:color-mix(in srgb,var(--acc) 6%,var(--card));
  border:1px solid color-mix(in srgb,var(--acc) 16%,var(--line-soft));
  border-left:4px solid var(--acc);
  border-radius:var(--r-lg);padding:22px 26px;margin-bottom:6px}
.pagehead.tinted .crumbs{margin-bottom:10px}
.pagehead.tinted h1{display:flex;align-items:center;gap:11px}
.pagehead.tinted h1::before{content:"";width:11px;height:11px;border-radius:50%;
  background:var(--acc);flex-shrink:0}
@media(max-width:700px){.pagehead.tinted{padding:18px 18px 18px 16px}}

/* ---------- yatay filtre çubuğu ---------- */
.fbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding-bottom:16px}
.fpill{position:relative}
.fpill>button{display:flex;align-items:center;gap:8px;height:42px;padding:0 16px;
  border:1px solid var(--line);border-radius:22px;background:var(--card);
  font-size:14px;font-weight:600;color:var(--ink);
  transition:border-color .15s,background .15s,color .15s}
.fpill>button:hover{border-color:var(--ink)}
.fpill.is-open>button,.fpill.has-value>button{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.fpill>button svg{transition:transform .18s}
.fpill.is-open>button svg{transform:rotate(180deg)}
.fpanel{position:absolute;top:calc(100% + 8px);left:0;z-index:40;width:320px;
  max-width:calc(100vw - 40px);background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:0 12px 34px rgba(21,21,21,.16);
  padding:16px 20px 12px;display:none;max-height:70vh;overflow-y:auto}
.fpill.is-open .fpanel{display:block}
.fpanel-foot{display:flex;justify-content:space-between;align-items:center;
  margin-top:12px;padding-top:12px;border-top:1px solid var(--line-soft);
  position:sticky;bottom:-12px;background:var(--card)}
.fpanel-foot button:first-child{font-size:13.5px;color:var(--muted);text-decoration:underline}
.fpanel-foot button:first-child:hover{color:var(--ink)}
.fpanel-foot .btn-apply{background:var(--ink);color:var(--paper);border-radius:var(--r);
  padding:8px 20px;font-size:13.5px;font-weight:600}
.fpanel-foot .btn-apply:hover{background:var(--navy)}

/* ---------- filtre grupları ---------- */
.fgroup{margin-bottom:18px}
.fgroup:last-child{margin-bottom:0}
.fgroup h4{font-size:12.5px;font-weight:700;color:var(--ink);letter-spacing:.02em;
  text-transform:uppercase;margin-bottom:10px}
.fopt{display:flex;align-items:center;gap:10px;padding:6px 0;cursor:pointer;
  font-size:14px;color:var(--ink-2)}
.fopt:hover{color:var(--ink)}
.fopt.off{opacity:.4;cursor:not-allowed}
.fopt input{width:17px;height:17px;flex-shrink:0;accent-color:var(--ink);cursor:inherit;margin:0}
.fopt span{flex:1;min-width:0}
.fopt em{font-style:normal;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.fswitch{display:flex;align-items:center;gap:11px;cursor:pointer;font-size:14px;
  color:var(--ink-2);padding:6px 0}
.fswitch input{position:absolute;opacity:0;width:0;height:0}
.fswitch .track{width:36px;height:20px;border-radius:10px;background:var(--line);
  position:relative;flex-shrink:0;transition:background .16s}
.fswitch .track i{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
  background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .16s}
.fswitch input:checked+.track{background:var(--green)}
.fswitch input:checked+.track i{transform:translateX(16px)}
.fswitch input:focus-visible+.track{outline:2px solid var(--navy-2);outline-offset:2px}
.fswitch .txt{flex:1;min-width:0}
.fswitch em{font-style:normal;font-size:12.5px;color:var(--muted)}

.fchips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding-bottom:16px}
.fchip{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500;
  background:var(--paper-2);color:var(--ink);border:1px solid var(--line);
  padding:6px 12px;border-radius:16px}
.fchip:hover{border-color:var(--ink)}
.fchip i{font-style:normal;font-size:11px;color:var(--muted)}
.fclear{font-size:13px;color:var(--link);font-weight:600;text-decoration:underline;padding:6px 4px}
.fclear:hover{color:var(--ink)}

/* ---------- sonuç çubuğu ---------- */
.resbar{display:flex;align-items:center;justify-content:space-between;gap:20px;
  flex-wrap:wrap;padding:2px 0 18px}
.resbar .count{font-size:14px;color:var(--muted)}
.resbar .count b{color:var(--ink);font-weight:700}
.sortwrap{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--muted)}
.sortwrap select{border:0;background:transparent;font-weight:700;color:var(--ink);
  font-size:14px;cursor:pointer;padding:6px 4px;border-radius:var(--r-sm)}

/* ---------- iki sütunlu düzen ---------- */
.layout{display:grid;grid-template-columns:258px minmax(0,1fr);gap:34px;
  align-items:start;padding-bottom:70px}
.side{position:sticky;top:calc(var(--nav-h) + 16px);border:1px solid var(--line);
  border-radius:var(--r-lg);background:var(--card);padding:20px;max-height:calc(100vh - var(--nav-h) - 40px);overflow-y:auto}
.side-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:16px}
.side-head h3{font-size:15px;font-weight:700;color:var(--ink)}
.side-head button{font-size:12.5px;color:var(--link);text-decoration:underline}
.tabs{display:flex;gap:24px;border-bottom:1px solid var(--line);margin-bottom:20px}
.tabs button{padding:0 0 12px;font-size:14.5px;font-weight:600;color:var(--muted);
  border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--ink)}
.mobile-filters{display:none}
@media(max-width:900px){
  .layout{grid-template-columns:minmax(0,1fr);gap:18px}
  .side{position:static;display:none;max-height:none}
  .side.open{display:block}
  .mobile-filters{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 18px;
    border:1px solid var(--line);border-radius:22px;background:var(--card);
    font-size:14px;font-weight:600;color:var(--ink);margin-bottom:14px}
}

/* ---------- sayfalama ---------- */
.pager{display:flex;align-items:center;justify-content:center;gap:6px;padding:32px 0 0;flex-wrap:wrap}
.pager button{min-width:38px;height:38px;padding:0 12px;border-radius:var(--r);
  border:1px solid transparent;font-size:14px;font-weight:600;color:var(--ink-2);
  display:inline-flex;align-items:center;gap:6px;justify-content:center}
.pager button:hover:not(:disabled){border-color:var(--line);background:var(--card);color:var(--ink)}
.pager button.on{background:var(--ink);color:var(--paper)}
.pager button:disabled{opacity:.35;cursor:default}
.pager .gap{color:var(--muted);padding:0 4px}
@media(max-width:560px){.pager button span{display:none}}

/* ============================================================
   PROFİL DETAY  (/calisan, /danisman)
   ============================================================ */
.detail{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:48px;
  align-items:start;padding-bottom:72px}
/* Profil başlığı: renkli pano yerine Fiverr'ın beyaz düzeni —
   büyük yuvarlak avatar, koyu ad, gri künye satırı. */
.detail-hero{padding:0 0 24px;margin-bottom:26px;border-bottom:1px solid var(--line-soft);
  display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.detail-hero .avt{width:96px;height:96px;font-size:34px;color:#fff;
  border:1px solid var(--line);box-shadow:0 2px 10px rgba(21,21,21,.08)}
.detail-hero h1{font-size:clamp(24px,2.8vw,30px);font-weight:800;letter-spacing:-.03em;
  line-height:1.12;margin-bottom:6px;color:var(--ink)}
.detail-hero .sub{font-size:15.5px;color:var(--ink-2);margin-bottom:10px;max-width:60ch}
.detail-hero .meta{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13.5px;
  color:var(--muted)}
.detail-hero .meta span{display:inline-flex;align-items:center;gap:5px}
.detail-hero .meta b{color:var(--ink)}
.detail-sec{margin-bottom:34px}
/* Bölüm başlıkları Fiverr'daki gibi küçük ve büyük harf aralıklı */
.detail-sec h2{font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-bottom:14px;padding-top:24px;border-top:1px solid var(--line-soft)}
.detail-sec:first-child h2{padding-top:0;border-top:0}
.detail-sec p{font-size:15.5px;color:var(--ink-2);max-width:72ch;white-space:pre-line}
/* Bilgi ızgarası. Son satır yarım kaldığında altta boş bir renk
   bloğu kalıyordu: zemin artık kartın kendi rengi, hücreleri de
   çizgiler ayırıyor. */
.factgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden}
.factgrid div{background:var(--card);padding:15px 17px;
  box-shadow:1px 0 0 var(--line-soft),0 1px 0 var(--line-soft)}
.factgrid small{display:block;font-size:12px;color:var(--muted);margin-bottom:4px}
.factgrid b{font-size:14.5px;color:var(--ink);font-weight:600}

/* profildeki soru–cevap listesi */
.qalist{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);overflow:hidden}
.qa{padding:18px 22px;border-bottom:1px solid var(--line-soft)}
.qa:last-child{border-bottom:0}
.qa small{display:block;font-size:12.5px;color:var(--muted);margin-bottom:6px}
.qa p{font-size:15px;color:var(--ink-2);line-height:1.6;max-width:70ch}

/* yan aksiyon kartı */
.actioncard{position:sticky;top:calc(var(--nav-h) + 16px);border:1px solid var(--line);
  border-radius:var(--r-lg);background:var(--card);overflow:hidden}
.actioncard-body{padding:24px}
.actioncard .priceline{display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;margin-bottom:16px}
.actioncard .priceline small{font-size:13px;color:var(--muted)}
.actioncard .priceline strong{font-size:27px;font-weight:800;letter-spacing:-.035em;color:var(--ink)}
.actioncard .rows{display:flex;flex-direction:column;gap:0;background:transparent;
  border:none;border-radius:var(--r);overflow:hidden;margin-bottom:18px}
.actioncard .rows div{background:var(--card);padding:11px 14px;display:flex;
  justify-content:space-between;gap:12px;font-size:13.5px;color:var(--muted)}
.actioncard .rows b{color:var(--ink);font-weight:600;text-align:right}
.actioncard .btn{width:100%;height:46px;font-size:15px}
.actioncard .gate{font-size:12.5px;color:var(--muted);line-height:1.5;text-align:center;margin-top:11px}
.actioncard .applied{display:flex;gap:9px;align-items:center;justify-content:center;
  background:var(--green-soft);color:var(--green-ink);font-weight:600;font-size:14px;
  padding:13px;border-radius:var(--r)}
.actioncard .foot{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;
  color:var(--muted);background:var(--green-soft);padding:13px 16px;line-height:1.45}
.actioncard .foot svg{flex-shrink:0;color:var(--green-ink);margin-top:2px}
@media(max-width:1080px){
  .detail{grid-template-columns:minmax(0,1fr);gap:30px}
  .actioncard{position:static}
  .detail-aside{order:-1}
}

/* ============================================================
   FORMLAR
   ============================================================ */
.field{margin-bottom:22px}
.field>label,.field>.lbl{display:block;font-size:14px;font-weight:600;color:var(--ink);margin-bottom:8px}
.field .opt{font-weight:400;color:var(--muted);font-size:inherit;
  background:none;border:0;border-radius:0;padding:0}
.field .help{font-size:13px;color:var(--muted);margin-top:7px}
.inp{width:100%;height:48px;padding:0 15px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--card);color:var(--ink);font-size:15px;transition:border-color .15s}
select.inp{padding-right:34px}
textarea.inp{height:auto;min-height:150px;padding:13px 15px;line-height:1.55;resize:vertical}
.inp:hover{border-color:var(--muted)}
.inp:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(15,39,64,.09)}
.inp.bad{border-color:var(--danger)}
.err{font-size:13px;color:var(--danger);margin-top:6px;display:none}
.err.show{display:block}
.counter{font-size:12.5px;color:var(--muted);text-align:right;margin-top:6px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media(max-width:700px){.grid2,.grid3{grid-template-columns:minmax(0,1fr)}}
.radios{display:flex;flex-direction:column;gap:10px}
.radiocard{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);
  border-radius:var(--r);padding:15px 17px;cursor:pointer;background:var(--card);
  transition:border-color .15s,background .15s}
.radiocard:hover{border-color:var(--muted)}
.radiocard input{margin:2px 0 0;width:18px;height:18px;accent-color:var(--ink);flex-shrink:0}
.radiocard b{display:block;font-size:15px;color:var(--ink);font-weight:600}
.radiocard small{display:block;font-size:13px;color:var(--muted);margin-top:3px;line-height:1.45}
.radiocard:has(input:checked){border-color:var(--ink);background:var(--paper-2)}
.money{position:relative}
.money .sym{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:15px}
.money .inp{padding-left:32px}
.money .suffix{position:absolute;right:15px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:14px}
.checkline{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;color:var(--ink-2);
  line-height:1.5;margin-bottom:14px;cursor:pointer}
.checkline input{width:18px;height:18px;flex-shrink:0;margin-top:1px;accent-color:var(--ink)}
.checkline a{color:var(--link);text-decoration:underline}

/* ---------- kayıt / giriş ---------- */
.auth{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);gap:60px;
  align-items:start;padding:44px 0 84px}
.authcard{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);padding:34px 36px}
.authcard h1{font-size:clamp(24px,2.7vw,31px);font-weight:800;letter-spacing:-.035em;
  color:var(--ink);line-height:1.1;margin-bottom:10px}
.authcard .lede{font-size:14.5px;color:var(--muted);margin-bottom:24px;max-width:52ch}
.authcard .btn{width:100%;height:50px;font-size:15.5px;margin-top:4px}
.authfoot{margin-top:20px;padding-top:18px;border-top:1px solid var(--line-soft);
  font-size:14px;color:var(--muted);text-align:center}
.authfoot a{color:var(--link);font-weight:600;text-decoration:underline}
.authside{padding-top:12px}
.authside h2{font-size:20px;font-weight:700;color:var(--ink);letter-spacing:-.025em;margin-bottom:18px}
.authside ul{list-style:none;display:flex;flex-direction:column;gap:18px;margin-bottom:26px}
.authside li{display:flex;gap:13px}
.authside li svg{flex-shrink:0;color:var(--green-ink);margin-top:3px}
.authside li b{display:block;font-size:15px;color:var(--ink);margin-bottom:3px}
.authside li p{font-size:13.5px;color:var(--muted);max-width:44ch}
@media(max-width:960px){.auth{grid-template-columns:minmax(0,1fr);gap:32px}.authside{order:-1;padding-top:0}}
@media(max-width:700px){.authcard{padding:24px 20px}}

/* ---------- profil / hesap ---------- */
.twocol{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:48px;
  align-items:start;padding-bottom:80px}
.panelcard{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);
  padding:30px 32px;margin-bottom:22px}
.panelcard h2{font-size:18px;font-weight:700;color:var(--ink);letter-spacing:-.02em;margin-bottom:6px}
.panelcard .sub{font-size:14px;color:var(--muted);margin-bottom:22px;max-width:62ch}
.progress-card{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);
  padding:22px;position:sticky;top:calc(var(--nav-h) + 16px)}
.progress-card h3{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:13px}
.progress-card .bar{height:6px;border-radius:4px;background:var(--paper-2);overflow:hidden;margin-bottom:15px}
.progress-card .bar i{display:block;height:100%;background:var(--green);border-radius:4px;transition:width .3s}
.checklist{list-style:none;display:flex;flex-direction:column;gap:10px;font-size:13.5px}
.checklist li{display:flex;gap:9px;align-items:flex-start;color:var(--muted)}
.checklist li.ok{color:var(--ink-2)}
.checklist li i{width:17px;height:17px;border-radius:50%;border:1.5px solid var(--line);
  flex-shrink:0;margin-top:2px;display:grid;place-items:center;font-style:normal;font-size:10px}
.checklist li.ok i{background:var(--green);border-color:var(--green);color:#fff}
@media(max-width:960px){.twocol{grid-template-columns:minmax(0,1fr);gap:26px}.progress-card{position:static}}

/* onay satırı */
.consent{display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:16px 0;border-bottom:1px solid var(--line-soft);flex-wrap:wrap}
.consent:last-child{border-bottom:0}
.consent b{display:block;font-size:14.5px;color:var(--ink)}
.consent small{display:block;font-size:12.5px;color:var(--muted);margin-top:3px}
.consent .state{font-size:12.5px;font-weight:600;padding:4px 10px;border-radius:12px;
  background:var(--green-soft);color:var(--green-ink)}
.consent .state.off{background:var(--paper-2);color:var(--muted)}

/* ============================================================
   İLAN VER — sihirbaz
   ============================================================ */
.wiz{min-height:calc(100vh - var(--nav-h));display:flex;flex-direction:column}
.wiz-body{flex:1;padding:48px 0 130px}
.wiz-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:64px;align-items:start}
.wiz-step{font-size:13.5px;color:var(--muted);margin-bottom:14px;font-weight:600}
.wiz-step b{color:var(--ink)}
.wiz-grid h2{font-size:clamp(26px,3.2vw,40px);font-weight:800;letter-spacing:-.04em;
  color:var(--ink);line-height:1.08;margin-bottom:14px}
.wiz-grid .lede{font-size:15.5px;color:var(--muted);max-width:44ch}
.wiz-hint{margin-top:24px;padding:16px 18px;border-left:3px solid var(--green);
  background:var(--green-soft);font-size:13.5px;color:var(--ink-2);max-width:44ch;line-height:1.5}
.wizfoot{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--paper);
  border-top:1px solid var(--line);box-shadow:0 -2px 14px rgba(21,21,21,.06)}
.wizfoot .bar{height:4px;background:var(--line-soft)}
.wizfoot .bar i{display:block;height:100%;background:var(--ink);
  transition:width .3s cubic-bezier(.2,.7,.3,1)}
.wizfoot .row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 0}
.wizfoot .btn{height:46px;padding:0 30px}
@media(max-width:960px){.wiz-grid{grid-template-columns:minmax(0,1fr);gap:28px}}

/* AI taslak kutusu */
.aibox{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);
  padding:20px 22px;margin-bottom:22px}
.aibox-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.aibox-head svg{color:var(--green-ink)}
.aibox-head b{font-size:14.5px;color:var(--ink)}
.aibox-head .engine{margin-left:auto;font-size:11.5px;font-weight:700;
  background:var(--green-soft);color:var(--green-ink);padding:3px 9px;border-radius:11px}
.aibox-head .engine.rules{background:var(--paper-2);color:var(--muted)}
.aibox p{font-size:13.5px;color:var(--muted);line-height:1.5}
.ai-loading{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted);padding:8px 0}
.spinner{width:16px;height:16px;border:2px solid var(--line);border-top-color:var(--ink);
  border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* özet */
.summary{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);overflow:hidden}
.summary-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;padding:18px 22px;
  border-bottom:1px solid var(--line-soft);align-items:start}
.summary-row:last-child{border-bottom:0}
.summary-row small{display:block;font-size:12px;color:var(--muted);margin-bottom:5px;
  text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.summary-row .val{font-size:15px;color:var(--ink);white-space:pre-line}
.summary-row button{font-size:13.5px;color:var(--link);font-weight:600;text-decoration:underline}

/* İlan yayınlandı ekranı. Eskiden bu blok sade `.done` adını
   taşıyordu ve kurulum başlığındaki <li class="st done"> rozetlerine
   de uyguluyordu: adım rozetleri 182 piksel iç boşluk alıp şeridi
   taşırıyordu. */
.wizdone{max-width:560px;margin:0 auto;text-align:center;padding:72px 0 110px}
.wizdone .ok{width:66px;height:66px;border-radius:50%;background:var(--green-soft);color:var(--green-ink);
  display:grid;place-items:center;margin:0 auto 22px}
.wizdone h2{font-size:30px;font-weight:800;letter-spacing:-.035em;color:var(--ink);margin-bottom:12px}
.wizdone p{font-size:15.5px;color:var(--muted);margin-bottom:28px}
.wizdone .actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ============================================================
   KİPLER (teklif / randevu)
   ============================================================ */
dialog.modal{border:0;padding:0;margin:auto;border-radius:var(--r-lg);max-width:560px;
  width:calc(100vw - 32px);background:var(--card);color:var(--ink-2);
  box-shadow:0 24px 60px rgba(0,0,0,.3)}
dialog.modal::backdrop{background:rgba(21,21,21,.55)}
/* ajans talep formu iki sütunlu — biraz daha geniş, uzun olduğu için kaydırılır */
dialog.agencymodal{max-width:680px}
dialog.agencymodal .modal-body{max-height:min(66vh,620px);overflow-y:auto}
dialog.agencymodal .modal-head small{max-width:52ch}
.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:24px 26px 0}
.modal-head h2{font-size:20px;font-weight:700;color:var(--ink);letter-spacing:-.025em}
.modal-head small{display:block;font-size:13.5px;color:var(--muted);margin-top:5px}
.modal-head .x{font-size:20px;color:var(--muted);line-height:1;padding:2px 6px}
.modal-body{padding:20px 26px 24px}
.modal-foot{display:flex;gap:12px;justify-content:flex-end;padding:16px 26px;
  border-top:1px solid var(--line-soft);background:var(--paper-2)}

/* ============================================================
   YÖNETİM
   ============================================================ */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:30px}
.kpi{border:1px solid var(--line);border-radius:var(--r);background:var(--card);padding:18px 20px}
.kpi b{display:block;font-size:28px;font-weight:800;letter-spacing:-.035em;color:var(--ink);line-height:1}
.kpi small{display:block;font-size:12.5px;color:var(--muted);margin-top:6px}
.kpi.alert{border-color:var(--amber)}
.kpi.alert b{color:var(--amber-ink)}
.tablecard{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);
  overflow:hidden;margin-bottom:26px}
.tablecard h2{font-size:16px;font-weight:700;color:var(--ink);padding:18px 22px;
  border-bottom:1px solid var(--line-soft)}
.tablewrap{overflow-x:auto}
table.data{width:100%;border-collapse:collapse;min-width:620px}
table.data th,table.data td{padding:13px 22px;text-align:left;font-size:13.5px;
  border-bottom:1px solid var(--line-soft);vertical-align:middle}
table.data th{background:var(--paper-2);color:var(--ink);font-weight:700;font-size:12.5px;
  text-transform:uppercase;letter-spacing:.03em}
table.data td{color:var(--ink-2)}
table.data tr:last-child td{border-bottom:0}
table.data .actions{display:flex;gap:8px;justify-content:flex-end}
.pillstate{font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:11px;
  background:var(--paper-2);color:var(--muted)}
.pillstate.active{background:var(--green-soft);color:var(--green-ink)}
.pillstate.suspended{background:var(--card);color:var(--danger);border:1px solid var(--danger)}
.pillstate.pending{background:#fbf1d9;color:var(--amber-ink)}

/* ============================================================
   TANIŞMA SOHBETİ (/tanisalim)
   Sorular tek tek, baloncuk baloncuk sorulur. Tam ekran:
   site header'ı yok, kendi üst çubuğu var.
   ============================================================ */
.talk{min-height:100vh;display:flex;flex-direction:column;background:var(--paper)}

.talk-top{position:sticky;top:0;z-index:30;background:var(--paper);
  border-bottom:1px solid var(--line-soft)}
.talk-top .row{display:flex;align-items:center;gap:18px;height:60px}
.talk-top .brand img{height:22px;width:auto;display:block}
.talk-top .step{margin-left:auto;font-size:13px;color:var(--muted);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.talk-top .leave{font-size:13.5px;color:var(--muted);text-decoration:underline}
.talk-top .leave:hover{color:var(--ink)}
.talk-top .bar{height:3px;background:var(--line-soft)}
.talk-top .bar i{display:block;height:100%;background:var(--green);
  transition:width .35s cubic-bezier(.2,.9,.3,1)}

/* akış */
.talk-flow{flex:1;width:100%;max-width:780px;margin:0 auto;padding:30px 22px 30px;
  display:flex;flex-direction:column;justify-content:flex-end}
.talk-sec{display:flex;align-items:center;gap:12px;margin:30px 0 20px;
  font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.talk-sec::before,.talk-sec::after{content:"";flex:1;height:1px;background:var(--line-soft)}
.talk-sec:first-child{margin-top:6px}
.talk-sec span{white-space:nowrap}

.bubble-row{display:flex;gap:12px;margin-bottom:16px;align-items:flex-start;
  animation:bubbleIn .34s cubic-bezier(.2,.9,.3,1.1) both}
.bubble-row.me{flex-direction:row-reverse}
@keyframes bubbleIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.bubble-row{animation:none}}

.bubble-av{width:34px;height:34px;border-radius:50%;flex-shrink:0;display:grid;
  place-items:center;font-size:12px;font-weight:700;color:#fff;background:var(--navy);
  margin-top:6px}
.bubble-av.me{background:var(--green)}
.bubble-row.me .bubble-av{visibility:hidden}

.bubble-stack{max-width:min(560px,84%);display:flex;flex-direction:column;gap:7px}
.bubble-row.me .bubble-stack{align-items:flex-end}

.bubble{background:var(--card);border:1px solid var(--line);
  border-radius:18px 18px 18px 4px;padding:14px 18px;font-size:16px;line-height:1.5;
  color:var(--ink);white-space:pre-line;overflow-wrap:anywhere}
.bubble.hint{background:transparent;border:0;padding:2px 4px;font-size:13.5px;
  color:var(--muted);line-height:1.55;border-radius:0}
.bubble.me{background:var(--ink);color:var(--paper);border-color:var(--ink);
  border-radius:18px 18px 4px 18px}
.bubble.me.skipped{background:transparent;color:var(--muted);border:1px dashed var(--line);
  font-style:italic}
.bubble-edit{font-size:12px;color:var(--muted);text-decoration:underline;padding:2px 4px}
.bubble-edit:hover{color:var(--ink)}

/* yazıyor göstergesi */
.typing{display:inline-flex;gap:4px;align-items:center;padding:16px 18px}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--muted);
  animation:typing 1.1s infinite ease-in-out both}
.typing i:nth-child(2){animation-delay:.16s}
.typing i:nth-child(3){animation-delay:.32s}
@keyframes typing{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}

/* cevap alanı */
.talk-compose{position:sticky;bottom:0;z-index:25;background:var(--paper);
  border-top:1px solid var(--line);box-shadow:0 -2px 14px rgba(21,21,21,.05)}
.talk-compose .inner{width:100%;max-width:780px;margin:0 auto;padding:14px 22px 18px}
.compose-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;
  max-height:190px;overflow-y:auto}
.opt{background:var(--card);border:1px solid var(--line);border-radius:999px;
  padding:9px 16px;font-size:14.5px;font-weight:500;color:var(--ink);line-height:1.2;
  transition:border-color .13s,background .13s,color .13s}
.opt:hover{border-color:var(--ink)}
.opt[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.opt.free{border-style:dashed;color:var(--muted)}

.compose-box{display:flex;align-items:flex-end;gap:10px;border:1px solid var(--line);
  border-radius:var(--r-lg);background:var(--card);padding:10px 10px 10px 16px;
  transition:border-color .15s,box-shadow .15s}
.compose-box:focus-within{border-color:var(--ink);box-shadow:0 0 0 3px rgba(15,39,64,.08)}
.compose-box.bad{border-color:var(--danger)}
.compose-box .sym{color:var(--muted);font-size:16px;padding-bottom:9px}
.compose-box textarea,.compose-box input{flex:1;min-width:0;border:0;background:transparent;
  color:var(--ink);font-size:16px;line-height:1.55;resize:none;padding:9px 0;font-family:inherit}
.compose-box textarea{max-height:190px}
.compose-box textarea:focus,.compose-box input:focus{outline:none}
.compose-box textarea::placeholder,.compose-box input::placeholder{color:var(--muted)}
.send{width:42px;height:42px;border-radius:50%;background:var(--ink);color:var(--paper);
  display:grid;place-items:center;flex-shrink:0;transition:background .15s,opacity .15s}
.send:hover{background:var(--navy)}
.send:disabled{opacity:.35;cursor:default}

.compose-foot{display:flex;align-items:center;gap:14px;margin-top:10px;
  font-size:12.5px;color:var(--muted);flex-wrap:wrap}
.compose-foot button{font-size:13px;color:var(--muted);text-decoration:underline}
.compose-foot button:hover{color:var(--ink)}
.compose-foot .keyhint{margin-left:auto}
@media(max-width:620px){.compose-foot .keyhint{display:none}}
.compose-err{color:var(--danger);font-size:13px;margin-top:8px;display:none}
.compose-err.show{display:block}
.compose-count{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}

/* etiket girişi */
.tagbox{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.tagbox:empty{display:none}
.tagpill{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:var(--paper);
  border-radius:999px;padding:8px 10px 8px 15px;font-size:14px;font-weight:500}
.tagpill i{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;
  background:rgba(255,255,255,.22);font-size:12px;font-style:normal;line-height:1}

/* kapanış */
.talk-done{max-width:620px;margin:0 auto;padding:40px 22px 60px;text-align:center}
.talk-done .ok{width:64px;height:64px;border-radius:50%;background:var(--green-soft);
  color:var(--green-ink);display:grid;place-items:center;margin:0 auto 22px}
.talk-done h2{font-size:30px;font-weight:800;letter-spacing:-.035em;color:var(--ink);margin-bottom:12px}
.talk-done p{font-size:15.5px;color:var(--muted);margin-bottom:26px}
.talk-done .actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.recap{text-align:left;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--card);margin:28px 0;overflow:hidden}
.recap-row{padding:14px 20px;border-bottom:1px solid var(--line-soft)}
.recap-row:last-child{border-bottom:0}
.recap-row small{display:block;font-size:12px;color:var(--muted);margin-bottom:4px}
.recap-row .v{font-size:14.5px;color:var(--ink);white-space:pre-line}

@media(max-width:620px){
  .talk-flow{padding:20px 16px}
  .talk-compose .inner{padding:12px 16px 16px}
  .bubble-stack{max-width:88%}
  .bubble{font-size:15.5px;padding:12px 16px}
}

/* ============================================================
   SOL FİLTRE PANELİ
   Upwork'ün yetenek arama ekranından: katlanır gruplar, seçenek
   sayaçları, ücret dağılım grafiği. Dar ekranda panel soldan
   kayarak açılır.
   ============================================================ */
.searchrow{display:flex;align-items:center;gap:14px;padding:4px 0 18px;flex-wrap:wrap}
.searchrow form{flex:1;min-width:240px;display:flex;align-items:center;gap:10px;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);
  padding:0 14px;height:48px;transition:border-color .15s,box-shadow .15s}
.searchrow form:focus-within{border-color:var(--ink);box-shadow:0 0 0 3px rgba(15,39,64,.08)}
.searchrow form svg{color:var(--muted);flex-shrink:0}
.searchrow input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);
  font-size:15px;font-family:inherit}
.searchrow input:focus{outline:none}
.searchrow .clearq{color:var(--muted);font-size:17px;line-height:1;padding:4px 6px;display:none}
.searchrow .clearq.on{display:block}
.searchrow .clearq:hover{color:var(--ink)}

.viewtoggle{display:inline-flex;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;background:var(--card);flex-shrink:0}
.viewtoggle button{width:40px;height:38px;display:grid;place-items:center;color:var(--muted)}
.viewtoggle button:hover{background:var(--paper-2);color:var(--ink)}
.viewtoggle button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}

/* katlanır gruplar */
.filters{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);
  overflow:hidden;position:sticky;top:calc(var(--nav-h) + 16px);
  max-height:calc(100vh - var(--nav-h) - 40px);overflow-y:auto;overscroll-behavior:contain}
.filters-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 18px;border-bottom:1px solid var(--line-soft);position:sticky;top:0;
  background:var(--card);z-index:2}
.filters-head h3{font-size:15px;font-weight:700;color:var(--ink)}
.filters-head button{font-size:12.5px;color:var(--link);text-decoration:underline}
.filters-head button:hover{color:var(--ink)}
.filters-close{display:none}

.fgrp{border-bottom:1px solid var(--line-soft)}
.fgrp:last-child{border-bottom:0}
.fgrp-head{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:15px 18px;font-size:13.5px;font-weight:700;color:var(--ink)}
.fgrp-head:hover{background:var(--paper-2)}
.fgrp-head .sum{margin-left:auto;font-size:12.5px;font-weight:500;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:96px}
.fgrp-head svg{flex-shrink:0;color:var(--muted);transition:transform .18s}
.fgrp[data-open="false"] .fgrp-head svg{transform:rotate(-90deg)}
.fgrp[data-open="false"] .fgrp-body{display:none}
.fgrp[data-open="true"] .sum{display:none}
.fgrp-body{padding:0 18px 15px}
.fgrp-body .fopt{padding:5px 0}
.fgrp .more{font-size:13px;color:var(--link);font-weight:600;padding:8px 0 0}
.fgrp .more:hover{text-decoration:underline}
.fopt.hide{display:none}

/* ücret dağılımı */
.hist{padding:4px 0 2px}
.hist-bars{display:flex;align-items:flex-end;gap:3px;height:64px;margin-bottom:8px}
.hist-bars button{flex:1;min-width:0;background:var(--line-soft);border-radius:3px 3px 0 0;
  min-height:4px;transition:background .13s}
.hist-bars button:hover{background:var(--muted)}
.hist-bars button.on{background:var(--green)}
.hist-ends{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted)}
.hist-range{display:flex;align-items:center;gap:8px;margin-top:12px}
.hist-range .money{flex:1}
.hist-range .money .inp{height:38px;font-size:14px;padding-left:28px}
.hist-range .money .sym{left:12px;font-size:14px}
.hist-range span{color:var(--muted);font-size:13px}

/* dar ekran: soldan açılan çekmece */
.filters-open{display:none;align-items:center;gap:8px;height:42px;padding:0 18px;
  border:1px solid var(--line);border-radius:22px;background:var(--card);
  font-size:14px;font-weight:600;color:var(--ink);margin-bottom:14px}
.filters-open b{background:var(--ink);color:var(--paper);border-radius:10px;
  font-size:11.5px;padding:2px 7px}
.filters-scrim{position:fixed;inset:0;background:rgba(21,21,21,.45);z-index:90;display:none}
body.filters-on .filters-scrim{display:block}

@media(max-width:900px){
  .layout{grid-template-columns:minmax(0,1fr);gap:0}
  .filters-open{display:inline-flex}
  .filters{position:fixed;top:0;left:0;bottom:0;z-index:95;width:min(320px,88vw);
    max-height:none;height:100%;border:0;border-right:1px solid var(--line);
    border-radius:0;transform:translateX(-100%);transition:transform .26s cubic-bezier(.2,.9,.3,1);
    box-shadow:0 0 40px rgba(21,21,21,.18)}
  body.filters-on .filters{transform:none}
  .filters-close{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
    color:var(--muted);font-size:17px}
  .filters-close:hover{background:var(--paper-2);color:var(--ink)}
  .filters-head button.filters-clear{margin-left:auto}
}
@media(prefers-reduced-motion:reduce){.filters{transition:none}}

/* ---------- Upwork tarzı satır görünümü ---------- */
.rows-view{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);overflow:hidden}
.prow{display:flex;gap:16px;padding:22px 24px;border-bottom:1px solid var(--line-soft);position:relative}
.prow:last-child{border-bottom:0}
.prow:hover{background:var(--paper-2)}
.prow .avt{width:56px;height:56px;font-size:19px;flex-shrink:0}
.prow-main{flex:1;min-width:0}
.prow-top{display:flex;align-items:flex-start;gap:14px}
.prow-top h3{font-size:16.5px;font-weight:700;color:var(--ink);letter-spacing:-.015em}
.prow-top h3 a:hover{color:var(--link);text-decoration:underline}
.prow-top .city{font-size:13px;color:var(--muted);margin-top:2px;display:block}
.prow-acts{margin-left:auto;display:flex;gap:8px;flex-shrink:0}
.prow-line{font-size:14.5px;color:var(--ink-2);margin:8px 0 10px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.prow-stats{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13px;color:var(--muted);margin-bottom:11px}
.prow-stats b{color:var(--ink);font-weight:700}
.prow-stats span{display:inline-flex;align-items:center;gap:5px}
.prow-stats .ok{color:var(--green-ink);font-weight:600}
@media(max-width:640px){
  .prow{flex-direction:column;gap:12px}
  .prow-acts{margin-left:0;width:100%}
  .prow-acts .btn{flex:1}
}

/* ============================================================
   BAŞVURU YÖNETİMİ (/basvurular)
   Solda ilanlar, sağda o ilana gelen adaylar.
   ============================================================ */
.joblist-side{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);
  overflow:hidden;position:sticky;top:calc(var(--nav-h) + 16px);
  max-height:calc(100vh - var(--nav-h) - 40px);overflow-y:auto}
.joblist-side h3{font-size:13px;font-weight:700;color:var(--ink);padding:16px 18px 12px;
  text-transform:uppercase;letter-spacing:.04em}
.jpick{display:block;width:100%;text-align:left;padding:14px 18px;
  border-top:1px solid var(--line-soft);transition:background .13s}
.jpick:hover{background:var(--paper-2)}
.jpick[aria-current="true"]{background:var(--paper-2);box-shadow:inset 3px 0 0 var(--ink)}
.jpick b{display:block;font-size:14px;font-weight:600;color:var(--ink);line-height:1.35;margin-bottom:4px}
.jpick small{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.jpick .fresh{background:var(--green);color:#fff;font-weight:700;font-size:11px;
  padding:1px 7px;border-radius:10px}

.appcard{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);
  padding:22px 24px;margin-bottom:14px}
.appcard-top{display:flex;gap:14px;align-items:flex-start;margin-bottom:14px}
.appcard-top .avt{width:48px;height:48px;font-size:17px;flex-shrink:0}
.appcard-top h3{font-size:16.5px;font-weight:700;color:var(--ink)}
.appcard-top h3 a:hover{color:var(--link);text-decoration:underline}
.appcard-top .sub{font-size:13px;color:var(--muted);margin-top:2px}
.appcard-top .when{margin-left:auto;font-size:12.5px;color:var(--muted);white-space:nowrap}
.appcard-stats{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13px;color:var(--muted);margin-bottom:14px}
.appcard-stats b{color:var(--ink);font-weight:700}
.appcard blockquote{border-left:3px solid var(--line);padding:2px 0 2px 14px;margin:0 0 16px;
  font-size:14.5px;color:var(--ink-2);line-height:1.6;white-space:pre-line}
.appcard-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding-top:14px;border-top:1px solid var(--line-soft)}

/* durum akışı */
.statusrow{display:flex;gap:6px;flex-wrap:wrap}
.statusrow button{font-size:12.5px;font-weight:600;padding:7px 13px;border-radius:16px;
  border:1px solid var(--line);color:var(--ink-2);background:var(--card);transition:all .13s}
.statusrow button:hover{border-color:var(--ink);color:var(--ink)}
.statusrow button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.statusrow button[aria-pressed="true"][data-status="hired"]{background:var(--green);border-color:var(--green)}
.statusrow button[aria-pressed="true"][data-status="rejected"]{background:var(--danger);border-color:var(--danger)}
.spill{font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:11px;
  background:var(--paper-2);color:var(--muted);white-space:nowrap}
.spill.sent{background:var(--paper-2);color:var(--ink-2)}
.spill.reviewed{background:#eef1f6;color:var(--navy-2)}
.spill.interview{background:#fbf1d9;color:var(--amber-ink)}
.spill.hired{background:var(--green-soft);color:var(--green-ink)}
.spill.rejected{background:var(--card);color:var(--danger);border:1px solid var(--danger)}

/* başvuru zaman çizelgesi — iş arayan tarafı */
.steps{display:flex;align-items:center;gap:0;margin:14px 0 4px;flex-wrap:wrap}
.steps .st{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted)}
.steps .st i{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--line);
  display:grid;place-items:center;font-style:normal;font-size:10px;flex-shrink:0}
.steps .st.done i{background:var(--green);border-color:var(--green);color:#fff}
.steps .st.done{color:var(--ink-2)}
.steps .st.now i{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.steps .st.now{color:var(--ink);font-weight:600}
.steps .bar{flex:1;min-width:14px;height:1.5px;background:var(--line);margin:0 8px}
.steps .st.off{opacity:.55}
.steps.rejected .st.now i{background:var(--danger);border-color:var(--danger)}
.steps.rejected .st.now{color:var(--danger)}

/* ============================================================
   İLETİŞİM KANALLARI
   Uygulama içi mesaj her zaman; telefon, WhatsApp ve e-posta
   kişinin izin verdiği kadarıyla.
   ============================================================ */
.channels{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.chan{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 15px;
  border-radius:var(--r);font-size:13.5px;font-weight:600;border:1px solid var(--line);
  background:var(--card);color:var(--ink);transition:border-color .13s,background .13s}
.chan:hover{border-color:var(--ink)}
.chan.primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.chan.primary:hover{background:var(--navy)}
.chan.wa{color:#0f7a4a;border-color:#bfe0cf}
.chan.wa:hover{background:#e8f5ee;border-color:#0f7a4a}
.chan svg{flex-shrink:0}
.chan-note{font-size:12.5px;color:var(--muted);line-height:1.5;margin-top:9px}

/* ============================================================
   MESAJLAŞMA (/mesajlar)
   Fiverr'ın mesaj kutusu düzeni: solda sohbetler, sağda yazışma.
   ============================================================ */
.mail{display:grid;grid-template-columns:320px minmax(0,1fr);gap:0;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);
  overflow:hidden;height:calc(100vh - var(--nav-h) - 150px);min-height:480px}
.mail-list{border-right:1px solid var(--line);overflow-y:auto;display:flex;flex-direction:column}
.mail-list-head{padding:16px 18px;border-bottom:1px solid var(--line-soft);
  position:sticky;top:0;background:var(--card);z-index:2}
.mail-list-head h2{font-size:15px;font-weight:700;color:var(--ink)}
.mail-list-head small{font-size:12.5px;color:var(--muted)}
.conv{display:flex;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line-soft);
  width:100%;text-align:left;transition:background .13s}
.conv:hover{background:var(--paper-2)}
.conv[aria-current="true"]{background:var(--paper-2);box-shadow:inset 3px 0 0 var(--ink)}
.conv .avt{width:40px;height:40px;font-size:14px;flex-shrink:0}
.conv-main{flex:1;min-width:0}
.conv-top{display:flex;align-items:baseline;gap:8px}
.conv-top b{font-size:14px;color:var(--ink);font-weight:600;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.conv-top .when{margin-left:auto;font-size:11.5px;color:var(--muted);white-space:nowrap;flex-shrink:0}
.conv .sub{font-size:12px;color:var(--muted);margin:2px 0 4px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.conv .last{font-size:13px;color:var(--ink-2);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.conv .dot{width:8px;height:8px;border-radius:50%;background:var(--green);
  align-self:center;flex-shrink:0}

.mail-thread{display:flex;flex-direction:column;min-width:0}
.thread-head{display:flex;align-items:center;gap:12px;padding:14px 20px;
  border-bottom:1px solid var(--line-soft);flex-wrap:wrap}
.thread-head .avt{width:38px;height:38px;font-size:13px}
.thread-head b{font-size:15px;color:var(--ink)}
.thread-head small{display:block;font-size:12.5px;color:var(--muted)}
.thread-head .channels{margin-left:auto}
.thread-body{flex:1;overflow-y:auto;padding:22px 20px;display:flex;flex-direction:column;gap:12px}
.msg{max-width:min(560px,78%);display:flex;flex-direction:column;gap:4px}
.msg.me{align-self:flex-end;align-items:flex-end}
.msg .txt{background:var(--paper-2);border-radius:16px 16px 16px 4px;padding:12px 16px;
  font-size:15px;line-height:1.5;color:var(--ink);white-space:pre-line;overflow-wrap:anywhere}
.msg.me .txt{background:var(--ink);color:var(--paper);border-radius:16px 16px 4px 16px}
.msg .when{font-size:11.5px;color:var(--muted);padding:0 4px}
.msg-day{align-self:center;font-size:11.5px;color:var(--muted);background:var(--paper-2);
  padding:4px 12px;border-radius:12px}

.thread-compose{border-top:1px solid var(--line-soft);padding:14px 20px}
.quickchips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.quickchips button{font-size:13px;border:1px solid var(--line);border-radius:16px;
  padding:6px 13px;color:var(--ink-2);background:var(--card)}
.quickchips button:hover{border-color:var(--ink);color:var(--ink)}
.thread-empty{flex:1;display:grid;place-items:center;padding:40px;text-align:center;color:var(--muted)}
.thread-empty b{display:block;color:var(--ink);font-size:16px;margin-bottom:6px}

@media(max-width:860px){
  .mail{grid-template-columns:minmax(0,1fr);height:auto;min-height:0}
  .mail-list{border-right:0;border-bottom:1px solid var(--line);max-height:300px}
  .mail.reading .mail-list{display:none}
  .mail:not(.reading) .mail-thread{display:none}
  .thread-body{min-height:340px}
  .thread-head .back{display:inline-flex}
}
.thread-head .back{display:none;align-items:center;gap:5px;font-size:13.5px;color:var(--link)}

/* ============================================================
   MESLEK DÜZENLEYİCİ
   Fiverr'ın "Professional Info" adımından: meslek seç, yıl aralığı
   ver, o meslekteki becerileri işaretle, istersen başka meslek ekle.
   Her blok o mesleğin kısa CV'sidir.
   ============================================================ */
.occ-editor{display:flex;flex-direction:column;gap:16px}
.occ-block{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);
  padding:22px 24px;position:relative}
.occ-block.primary{border-color:var(--ink)}
.occ-head{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.occ-num{width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--paper);
  display:grid;place-items:center;font-size:12px;font-weight:700;flex-shrink:0}
.occ-head .lead{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--green-ink);background:var(--green-soft);padding:3px 9px;border-radius:10px}
.occ-head select{flex:1;min-width:180px;max-width:320px}
.occ-del{margin-left:auto;font-size:13px;color:var(--danger);text-decoration:underline}
.occ-del:hover{color:#6d211a}
.occ-add{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  border:1px dashed var(--line);border-radius:var(--r);background:transparent;
  padding:13px 20px;font-size:14.5px;font-weight:600;color:var(--link);transition:all .14s}
.occ-add:hover{border-color:var(--link);background:var(--card)}
.occ-add:disabled{opacity:.45;cursor:default}

.yearrow{display:flex;align-items:center;gap:10px}
.yearrow select{flex:1;min-width:0}
.yearrow span{color:var(--muted);font-size:14px}
.stillhere{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink-2);
  margin-top:8px;cursor:pointer}
.stillhere input{width:16px;height:16px;accent-color:var(--ink)}

/* beceri kutucukları — Fiverr'ın "iki ile beş beceri seç" ızgarası */
.skillgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:4px 16px;
  margin-bottom:10px}
.skillgrid label{display:flex;align-items:center;gap:9px;padding:6px 0;font-size:14px;
  color:var(--ink-2);cursor:pointer}
.skillgrid label:hover{color:var(--ink)}
.skillgrid input{width:16px;height:16px;accent-color:var(--ink);flex-shrink:0}
.occ-empty{padding:26px;text-align:center;color:var(--muted);font-size:14px;
  border:1px dashed var(--line);border-radius:var(--r-lg)}

/* ============================================================
   KAYIT SİHİRBAZI
   Üstte adımlar ve tamamlanma yüzdesi (Fiverr düzeni).
   ============================================================ */
.stepbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding-bottom:18px;border-bottom:1px solid var(--line-soft);margin-bottom:28px}
.stepbar .st{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--muted)}
.stepbar .st i{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--line);
  display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:700;flex-shrink:0}
.stepbar .st.done i{background:var(--green);border-color:var(--green);color:#fff}
.stepbar .st.done{color:var(--ink-2)}
.stepbar .st.now i{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.stepbar .st.now{color:var(--ink);font-weight:700}
.stepbar .arrow{color:var(--line);font-size:13px}
.stepbar .rate{margin-left:auto;text-align:right;min-width:150px}
.stepbar .rate small{display:block;font-size:12px;color:var(--muted);margin-bottom:5px}
.stepbar .rate .bar{height:5px;border-radius:3px;background:var(--paper-2);overflow:hidden}
.stepbar .rate .bar i{display:block;height:100%;background:var(--green);transition:width .3s}
@media(max-width:760px){
  .stepbar .st span{display:none}
  .stepbar .rate{min-width:110px}
}

.signup{max-width:820px;margin:0 auto;padding:34px 0 90px}
.signup h1{font-size:clamp(25px,3vw,34px);font-weight:800;letter-spacing:-.035em;
  color:var(--ink);line-height:1.1;margin-bottom:8px}
.signup .lede{font-size:15px;color:var(--muted);margin-bottom:26px;max-width:60ch}
.signup-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-top:28px;padding-top:22px;border-top:1px solid var(--line-soft);flex-wrap:wrap}
.signup-foot .btn{height:48px;padding:0 30px}
.signup-alt{font-size:14px;color:var(--muted)}
.signup-alt a{color:var(--link);font-weight:600;text-decoration:underline}

/* ============================================================
   KISA CV / TAM CV
   ============================================================ */
.cvtabs{display:flex;gap:26px;border-bottom:1px solid var(--line);margin-bottom:24px;
  overflow-x:auto;scrollbar-width:none}
.cvtabs::-webkit-scrollbar{display:none}
.cvtabs button{padding:0 0 12px;font-size:15px;font-weight:600;color:var(--muted);
  border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.cvtabs button:hover{color:var(--ink)}
.cvtabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--ink)}
.cvtabs .all{margin-left:auto}

.cvcard{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);
  padding:24px 26px;margin-bottom:16px}
.cvcard.lead{border-color:var(--ink);box-shadow:var(--shadow)}
.cvcard-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.cvcard-head h3{font-size:17px;font-weight:700;color:var(--ink);letter-spacing:-.02em}
.cvcard-head .years{font-size:13px;color:var(--muted);margin-top:3px;display:block}
.cvcard-head .rate{margin-left:auto;text-align:right}
.cvcard-head .rate b{font-size:17px;font-weight:700;color:var(--ink);display:block}
.cvcard-head .rate small{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.cvcard p{font-size:15px;color:var(--ink-2);line-height:1.6;margin-bottom:14px;white-space:pre-line}
.cvcard .places{font-size:13px;color:var(--muted);margin-bottom:12px}
.cvcard .places b{color:var(--ink-2);font-weight:600}

/* ============================================================
   İLAN VER HATIRLATMASI
   İşveren ilan vermemişse ya da ilanı yayında değilse, olduğu
   yerde bir sonraki adımı gösteririz.
   ============================================================ */
.nudge{display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  background:var(--invert-bg);color:var(--invert-fg);border-radius:var(--r-lg);
  padding:24px 28px;margin-bottom:24px}
.nudge .ico{width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.13);
  display:grid;place-items:center;flex-shrink:0;color:#fff}
.nudge-main{flex:1;min-width:220px}
.nudge b{display:block;font-size:17px;font-weight:700;letter-spacing:-.02em;margin-bottom:4px}
.nudge p{font-size:14px;color:rgba(255,255,255,.74);line-height:1.5;max-width:62ch}
.nudge .acts{display:flex;gap:10px;flex-wrap:wrap}
.nudge .btn-light{height:44px}
.nudge .ghost{border:1px solid rgba(255,255,255,.32);color:#fff;background:transparent;
  height:44px;padding:0 20px;border-radius:var(--r);font-size:15px;font-weight:600;
  display:inline-flex;align-items:center}
.nudge .ghost:hover{border-color:#fff}
.nudge .dismiss{color:rgba(255,255,255,.5);font-size:20px;line-height:1;padding:4px 6px;align-self:flex-start}
.nudge .dismiss:hover{color:#fff}
.nudge.soft{background:var(--green-soft);color:var(--ink)}
.nudge.soft p{color:var(--ink-2)}
/* açık zeminde beyaz ✕ ve beyaz kenarlı düğme okunmuyordu */
.nudge.soft .dismiss{color:var(--muted)}
.nudge.soft .dismiss:hover{color:var(--ink)}
.nudge.soft .ghost{border-color:var(--line);color:var(--ink)}
.nudge.soft .ghost:hover{border-color:var(--ink)}
.nudge.soft .ico{background:var(--green);color:#fff}
.nudge.soft .btn-light{background:var(--ink);color:var(--paper)}
@media(max-width:640px){.nudge{padding:20px}.nudge .acts,.nudge .acts .btn{width:100%}}

/* ============================================================
   GİRİŞ / KAYIT
   Düzen Upwork'ün kayıt akışından (rol kartları → form, e-posta →
   parola) ve Fiverr'ın iki panelli katılma kutusundan alındı.
   Renkler aklar paletinden.
   ============================================================ */
.authshell{min-height:100vh;display:flex;flex-direction:column;background:var(--paper-2)}
.authtop{background:var(--paper);border-bottom:1px solid var(--line-soft)}
.authtop .row{display:flex;align-items:center;gap:16px;height:64px}
.authtop .brand img{height:24px;width:auto;display:block}
.authtop .right{margin-left:auto;display:flex;align-items:center;gap:16px;
  font-size:14px;color:var(--muted)}
.authtop .right a{color:var(--green-ink);font-weight:600}
.authtop .right a:hover{text-decoration:underline}
.authtop .langbtn{color:var(--ink-2)}

.authbody{flex:1;display:flex;align-items:flex-start;justify-content:center;
  padding:56px 22px 80px}
.authbody.center{align-items:center;padding-top:40px}

/* ---- rol seçimi (Upwork "Join as a client or freelancer") ---- */
.rolepick{width:100%;max-width:620px;text-align:center}
.rolepick h1{font-size:clamp(26px,3.4vw,34px);font-weight:700;letter-spacing:-.03em;
  color:var(--ink);margin-bottom:30px}
.rolegrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:28px}
.rolecard{position:relative;text-align:left;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--card);padding:22px 20px 24px;min-height:140px;
  display:flex;flex-direction:column;gap:14px;transition:border-color .14s,box-shadow .14s}
.rolecard:hover{border-color:var(--muted)}
.rolecard[aria-pressed="true"]{border-color:var(--green);border-width:2px;padding:21px 19px 23px;
  box-shadow:0 0 0 1px var(--green)}
.rolecard .ico{color:var(--ink)}
.rolecard b{font-size:16.5px;font-weight:600;color:var(--ink);line-height:1.3}
.rolecard .dot{position:absolute;top:20px;right:20px;width:20px;height:20px;border-radius:50%;
  border:1.5px solid var(--line);display:grid;place-items:center}
.rolecard[aria-pressed="true"] .dot{border-color:var(--green);border-width:5px}
.rolepick .btn{min-width:200px;height:48px}
.rolepick .btn:disabled{background:var(--line-soft);color:var(--muted);cursor:default}
.rolepick .alt{margin-top:18px;font-size:14px;color:var(--muted)}
.rolepick .alt a{color:var(--green-ink);font-weight:600;text-decoration:underline}
@media(max-width:560px){.rolegrid{grid-template-columns:minmax(0,1fr)}}

/* ---- form (Upwork "Sign up to find work you love") ---- */
.authform{width:100%;max-width:420px}
.authform.wide{max-width:520px}
.authform h1{font-size:clamp(24px,3vw,31px);font-weight:700;letter-spacing:-.03em;
  color:var(--ink);text-align:center;margin-bottom:8px}
.authform .sub{font-size:14.5px;color:var(--muted);text-align:center;margin-bottom:26px}
.authform .sub a{color:var(--green-ink);font-weight:600;text-decoration:underline}

.authbox{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:32px 30px;box-shadow:0 2px 14px rgba(21,21,21,.05)}
.authbox h1{margin-bottom:22px}

/* parola alanı ve göz düğmesi */
.pwwrap{position:relative}
.pwwrap .inp{padding-right:46px}
.eye{position:absolute;right:12px;top:50%;transform:translateY(-50%);
  color:var(--muted);padding:4px;line-height:0}
.eye:hover{color:var(--ink)}
.pwrules{list-style:none;display:flex;flex-direction:column;gap:6px;margin-top:10px}
.pwrules li{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.pwrules li i{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--line);
  flex-shrink:0;display:grid;place-items:center;font-style:normal;font-size:9px}
.pwrules li.ok{color:var(--green-ink)}
.pwrules li.ok i{background:var(--green);border-color:var(--green);color:#fff}

/* onay kutuları — Upwork'ün yeşil işaretleri */
.agree{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;color:var(--ink-2);
  line-height:1.5;margin-bottom:14px;cursor:pointer}
.agree input{width:18px;height:18px;flex-shrink:0;margin-top:1px;accent-color:var(--green)}
.agree a{color:var(--green-ink);text-decoration:underline}

.authform .btn-go,.authbox .btn-go,.splitcard .panel .btn-go{width:100%;height:48px;font-size:15.5px}
.authfoot2{text-align:center;margin-top:18px;font-size:14px;color:var(--muted)}
.authfoot2 a{color:var(--green-ink);font-weight:600;text-decoration:underline}
.finetext{font-size:12.5px;color:var(--muted);line-height:1.55;text-align:center;margin-top:20px}
.finetext a{color:var(--link);text-decoration:underline}

/* girilen e-postanın gösterildiği satır (Upwork parola adımı) */
.lockedmail{display:flex;align-items:center;gap:12px;background:var(--paper-2);
  border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;margin-bottom:16px;
  font-size:14.5px;color:var(--ink-2)}
.lockedmail span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.lockedmail button{color:var(--green-ink);font-weight:600;font-size:13.5px;text-decoration:underline}

/* ---- looking.net iki panelli giriş / kayıt kutusu ---- */
.splitcard{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  width:100%;max-width:860px;background:var(--card);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:0 14px 44px rgba(21,21,21,.14)}
.splitcard .pitch{background:#075dff;color:#fff;padding:36px 38px 32px;display:flex;
  flex-direction:column;justify-content:space-between;position:relative;isolation:isolate;overflow:hidden}
.pitch-brand{display:inline-flex;align-items:baseline;width:max-content;color:#fff;
  font-family:var(--display);font-size:27px;line-height:1;letter-spacing:-.055em;position:relative;z-index:2}
.pitch-brand b{font-weight:800}.pitch-brand span{font-weight:600;opacity:.72}
.pitch-copy{position:relative;z-index:2;margin:48px 0 36px}
.pitch-copy small{display:block;font-size:13px;font-weight:700;color:rgba(255,255,255,.76);margin-bottom:13px}
.splitcard .pitch h2{font-size:clamp(28px,3vw,38px);font-weight:750;letter-spacing:-.05em;
  line-height:1.04;margin-bottom:16px;max-width:11ch}
.pitch-copy>p{font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.82);max-width:34ch;margin-bottom:28px}
.splitcard .pitch ul{list-style:none;display:flex;flex-direction:column;gap:13px}
.splitcard .pitch li{display:flex;gap:11px;font-size:14px;color:rgba(255,255,255,.94);line-height:1.45}
.splitcard .pitch li svg{flex-shrink:0;color:#fff;opacity:.9;margin-top:2px}
.pitch-foot{display:flex;align-items:center;gap:9px;font-size:12.5px;color:rgba(255,255,255,.72);position:relative;z-index:2}
.pitch-foot i{width:20px;height:1px;background:rgba(255,255,255,.55)}
.pitch-orbits{position:absolute;width:340px;height:340px;right:-185px;top:-175px;border:1px solid rgba(255,255,255,.18);
  border-radius:50%;z-index:1}
.pitch-orbits::before,.pitch-orbits::after,.pitch-orbits i{content:"";position:absolute;border:1px solid rgba(255,255,255,.15);border-radius:50%}
.pitch-orbits::before{inset:54px}.pitch-orbits::after{inset:108px}
.pitch-orbits i:nth-child(1){width:8px;height:8px;background:#fff;border:0;left:72px;bottom:63px;box-shadow:0 0 0 6px rgba(255,255,255,.12)}
.pitch-orbits i:nth-child(2){width:6px;height:6px;background:#fff;border:0;left:136px;bottom:102px}
.pitch-orbits i:nth-child(3){width:5px;height:5px;background:#fff;border:0;left:54px;bottom:142px}
.splitcard .panel{padding:38px 36px}
.splitcard .panel .btn-go{background:#075dff}.splitcard .panel .btn-go:hover{background:#004bd7}
.splitcard .panel .sub a,.splitcard .authfoot2 a{color:#075dff}
.splitcard .agree input{accent-color:#075dff}
.splitcard .pwrules li.ok{color:#075dff}.splitcard .pwrules li.ok i{background:#075dff;border-color:#075dff}
@media(max-width:760px){
  .splitcard{grid-template-columns:minmax(0,1fr)}
  .splitcard .pitch{padding:30px 26px}
  .splitcard .panel{padding:28px 24px}
}

/* ---- kayıt sonrası: profili nasıl dolduralım (Upwork 1/10) ---- */
.pathpick{width:100%;max-width:760px}
.pathpick .head{font-size:13.5px;color:var(--muted);margin-bottom:10px}
.pathpick .head b{color:var(--ink)}
.pathpick .bar{height:3px;background:var(--line);border-radius:2px;margin-bottom:26px}
.pathpick .bar i{display:block;height:100%;width:12%;background:var(--ink);border-radius:2px}
.pathpick h1{font-size:clamp(24px,3vw,32px);font-weight:700;letter-spacing:-.03em;
  color:var(--ink);margin-bottom:10px}
.pathpick .lede{font-size:15px;color:var(--muted);margin-bottom:26px;max-width:64ch}
.pathgrid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:32px;align-items:start}
.pathopts{display:flex;flex-direction:column;gap:12px}
.pathopt{display:flex;align-items:center;gap:12px;justify-content:center;
  border:1px solid var(--green);border-radius:var(--r);background:var(--card);
  padding:15px 20px;font-size:15px;font-weight:600;color:var(--green-ink);transition:background .14s}
.pathopt:hover{background:var(--green-soft)}
.pathopt small{font-weight:400;color:var(--muted)}
.pathtip{background:var(--paper-2);border-radius:var(--r-lg);padding:24px}
.pathtip p{font-size:15px;color:var(--ink);line-height:1.55;margin-bottom:12px}
.pathtip small{font-size:12.5px;color:var(--muted)}
@media(max-width:760px){.pathgrid{grid-template-columns:minmax(0,1fr)}}

/* giriş / katıl modalı — Fiverr'ın sayfa üstünde açılan kutusu */
dialog.authmodal{max-width:880px;width:calc(100vw - 32px);background:transparent;
  box-shadow:none;overflow:visible;padding:0}
dialog.authmodal::backdrop{background:rgba(21,21,21,.6)}
dialog.authmodal .splitcard{max-width:none;box-shadow:0 24px 64px rgba(0,0,0,.34)}
dialog.authmodal .panel{max-height:min(78vh,720px);overflow-y:auto}
.splitcard .panel{position:relative}
.authclose{position:absolute;top:14px;right:16px;font-size:19px;line-height:1;
  color:var(--muted);padding:4px 7px;border-radius:50%;z-index:2}
.authclose:hover{color:var(--ink);background:var(--paper-2)}
.splitcard .panel h1{font-size:23px;font-weight:700;letter-spacing:-.03em;
  color:var(--ink);margin-bottom:6px}
.splitcard .panel .sub{font-size:14px;color:var(--muted);margin-bottom:20px}
.splitcard .panel .sub a{color:var(--green-ink);font-weight:600;text-decoration:underline}
.splitcard.narrow{max-width:720px}
.splitcard .panel.rolepick{max-width:none;text-align:left}
.splitcard .panel.rolepick h1{text-align:left;font-size:22px;margin-bottom:20px}
.splitcard .panel.rolepick .rolegrid{grid-template-columns:minmax(0,1fr);gap:12px;margin-bottom:20px}
.splitcard .panel.rolepick .rolecard{min-height:0;flex-direction:row;align-items:center;
  gap:14px;padding:18px 46px 18px 18px}
.splitcard .panel.rolepick .rolecard[aria-pressed="true"]{padding:17px 45px 17px 17px}
.splitcard .panel.rolepick .rolecard .dot{top:50%;transform:translateY(-50%)}
.splitcard .panel.rolepick .btn{min-width:0;width:100%}
@media(max-width:760px){
  dialog.authmodal .splitcard .pitch{display:none}
  dialog.authmodal{max-width:460px}
}

/* ---------- profil fotoğrafı alanı ---------- */
.photorow{display:flex;gap:20px;align-items:flex-start;padding-bottom:22px;
  margin-bottom:22px;border-bottom:1px solid var(--line-soft);flex-wrap:wrap}
/* kurulum formunda satırın kendi ayracı var */
.fx-row .photorow{padding-bottom:0;margin-bottom:0;border-bottom:0;align-items:center}
.photorow .avt{border:2px solid var(--line);box-shadow:0 2px 10px rgba(21,21,21,.08)}
.photoinfo{flex:1;min-width:200px}
.photoinfo b{display:block;font-size:14px;font-weight:600;color:var(--ink);margin-bottom:5px}
.photoinfo p{font-size:13px;color:var(--muted);line-height:1.5;margin-bottom:12px;max-width:52ch}
.photoacts{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.photoacts label{cursor:pointer}

/* ============================================================
   PROFİL KURULUMU (/kurulum) — üç aşama
   ============================================================ */
.setup{min-height:100vh;display:flex;flex-direction:column;background:var(--paper)}
.setup-top{position:sticky;top:0;z-index:30;background:var(--paper);
  border-bottom:1px solid var(--line-soft)}
.setup-top .row{display:flex;align-items:center;gap:22px;height:62px}
.setup-top .brand img{height:22px;width:auto;display:block}
/* .stepbar ilan sihirbazında bir bölüm başlığı olarak kullanılıyor;
   burada sticky şeridin içinde duruyor, o yüzden kenarlık ve
   boşlukları sıfırlanıyor. Etiketler de gizlenmiyor. */
.setup-top .stepbar{margin:0 auto;padding:0;border:0;gap:18px;flex-wrap:nowrap;
  list-style:none}
.setup-top .stepbar .st span{display:inline}
.setup-top .leave{font-size:13.5px;color:var(--muted);text-decoration:underline;white-space:nowrap}
.setup-top .leave:hover{color:var(--ink)}
.setup-top .bar{height:3px;background:var(--line-soft)}
.setup-top .bar i{display:block;height:100%;background:var(--green);
  transition:width .35s cubic-bezier(.2,.9,.3,1)}

.setup-body{max-width:1020px;padding-top:38px;padding-bottom:40px}
.setup-head{margin-bottom:30px}
.setup-head .eyebrow{display:block;font-size:12px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--green-ink);margin-bottom:10px}
.setup-head h1{font-size:clamp(26px,3.4vw,38px);font-weight:800;letter-spacing:-.035em;
  line-height:1.1;color:var(--ink);margin-bottom:10px;font-family:var(--display)}
.setup-head .lede{font-size:15.5px;color:var(--muted);max-width:60ch}

.setup-group{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);
  padding:24px 26px 4px;margin-bottom:18px}
.setup-group h3{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:18px;
  padding-bottom:12px;border-bottom:1px solid var(--line-soft)}

/* çoklu seçim kutucukları */
.chkgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 18px}
.chk{display:flex;gap:9px;align-items:flex-start;font-size:14px;color:var(--ink-2);
  line-height:1.4;cursor:pointer}
.chk input{width:17px;height:17px;flex-shrink:0;margin-top:1px;accent-color:var(--green)}
.chk:hover{color:var(--ink)}
/* uzun listelerde "diğer" düğmesi ve altındaki gizli şıklar */
.chkmore{justify-self:start;display:inline-flex;align-items:center;gap:7px;
  font-size:14px;font-weight:600;color:var(--ink);line-height:1.4}
.chkmore::after{content:"›";display:inline-block;font-size:15px;line-height:1;
  transform:rotate(90deg);transition:transform .15s}
.chkmore[aria-expanded="true"]::after{transform:rotate(-90deg)}
.chkmore:hover{color:var(--green-ink)}
.chkrest{grid-column:1 / -1;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 18px}
/* display:grid, hidden özniteliğinin display:none'unu eziyordu */
.chkrest[hidden]{display:none}

.setup-foot{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:22px}
.btn-lg{height:50px;padding:0 30px;font-size:15.5px}

/* 2. aşama: sohbet */
.setup-body .talk-flow{max-width:none;padding:0;margin-bottom:22px;justify-content:flex-start}
.setup-compose{border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--card);padding:18px 20px}
.setup-compose .setup-foot{margin-top:14px}

@media(max-width:820px){
  /* kısayol `padding` .wrap'in yan boşluklarını da sıfırlıyordu:
     logo ve "sonra devam et" ekranın kenarına yapışıyordu. */
  .setup-top .row{gap:12px;height:auto;padding-top:10px;padding-bottom:10px;flex-wrap:wrap}
  .setup-top .brand{margin-right:auto}
  .setup-top .stepbar{order:3;width:100%;margin:0;gap:0;justify-content:space-between}
  .setup-top .stepbar .st{font-size:12.5px;gap:7px;min-width:0}
  .setup-top .stepbar .st span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .setup-top .stepbar .st i{width:21px;height:21px;font-size:11px}
}
@media(max-width:700px){
  .setup-group{padding:20px 18px 2px}
  .setup-foot .btn{width:100%}
}
@media(max-width:520px){
  .chkgrid,.chkrest{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:560px){
  .setup-top .stepbar .st span{display:none}
  .setup-top .stepbar{justify-content:flex-start;gap:14px}
}

/* dil seviyeleri — seçilen her dilin hemen altında */
.langlevels{display:grid;gap:10px}
.langrow{display:grid;grid-template-columns:minmax(110px,1fr) minmax(0,1.6fr);
  gap:12px;align-items:center}
.langrow>span{font-size:14px;color:var(--ink-2);font-weight:600}
.langrow .inp{height:42px}

/* ek meslekler — her meslek kendi kartında, alanlar etiketli */
.occlist{display:grid;gap:12px}
.occrow{border:1px solid var(--line);border-radius:var(--r);background:var(--paper-2);
  padding:12px 16px 16px}
.occrow-top{display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-bottom:12px}
.occrow-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px}
.occf{min-width:0}
.occf.wide{grid-column:1 / -1}
.occf>span{display:block;margin-bottom:5px;font-size:12.5px;font-weight:600;color:var(--ink-2)}
.occrow .inp{height:42px;background:var(--card)}
.occdel{width:30px;height:30px;border-radius:50%;color:var(--muted);font-size:14px;
  border:1px solid var(--line);background:var(--card);line-height:1}
.occdel:hover{color:var(--danger);border-color:var(--danger)}
.occlist .btn-sm{justify-self:start}
@media(max-width:700px){
  .langrow{grid-template-columns:minmax(0,1fr);gap:5px}
  .occrow-grid{grid-template-columns:minmax(0,1fr)}
}

/* aylık maaş aralığının saatlik karşılığı */
.hourly{margin-top:9px;padding:10px 13px;border-radius:var(--r);
  background:var(--green-soft);color:var(--ink-2);font-size:13.5px;line-height:1.5;
  border-left:3px solid var(--green)}

/* meslek arama kutusu */
.combo{position:relative}
.combo .inp{padding-right:40px}
.combo-ico{position:absolute;right:13px;top:50%;transform:translateY(-50%);
  color:var(--muted);line-height:0;pointer-events:none}
.combo-list{position:absolute;left:0;right:0;top:calc(100% + 5px);z-index:40;
  list-style:none;margin:0;padding:5px;max-height:280px;overflow-y:auto;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 10px 30px rgba(21,21,21,.16)}
.combo-list li{padding:9px 12px;border-radius:5px;cursor:pointer;
  display:flex;align-items:baseline;gap:9px;font-size:14.5px;color:var(--ink)}
.combo-list li b{font-weight:600}
.combo-list li small{font-size:12.5px;color:var(--muted)}
.combo-list li small::before{content:"· "}
.combo-list li:hover,.combo-list li.on{background:var(--paper-2)}
.combo-list li[aria-selected="true"]{color:var(--green-ink)}
.combo-empty{color:var(--muted);cursor:default;font-size:13.5px}
.combo-empty:hover{background:none}
/* ek meslek satırında kutu ızgaranın içinde durur */
.occrow .combo{min-width:0}

/* meslek filtresinde kategori başlıkları */
.fcat{border-bottom:1px solid var(--line-soft)}
.fcat:last-of-type{border-bottom:0}
.fcat>summary{display:flex;align-items:center;gap:8px;padding:8px 2px;cursor:pointer;
  font-size:13.5px;font-weight:600;color:var(--ink-2);list-style:none}
.fcat>summary::-webkit-details-marker{display:none}
.fcat>summary::before{content:"›";color:var(--muted);font-size:14px;line-height:1;
  transition:transform .15s;display:inline-block}
.fcat[open]>summary::before{transform:rotate(90deg)}
.fcat>summary span{flex:1;min-width:0}
.fcat>summary em{font-style:normal;font-size:12px;color:var(--muted);
  font-variant-numeric:tabular-nums}
.fcat>summary b{font-size:11.5px;font-weight:700;color:var(--paper);background:var(--ink);
  border-radius:9px;padding:1px 7px}
.fcat:hover>summary{color:var(--ink)}
.fcat-body{padding:0 0 6px 14px}

/* ============================================================
   İki adımlı meslek seçici (kategori → unvan)
   Kategoriler alt alta; içine girince unvanlar tek tek ya da
   "hepsini seç" ile toplu işaretleniyor. Seçilenler en üstte
   kaldırılabilir etiket olarak duruyor.
   ============================================================ */
.occpick{display:grid;gap:10px}
.occpick-ara{height:44px}

/* seçilenler */
.occpick-tags{display:flex;flex-wrap:wrap;gap:8px}
.occpick-tag{display:inline-flex;align-items:center;gap:8px;padding:8px 10px 8px 14px;
  border-radius:22px;background:var(--ink);color:var(--paper);font-size:13.5px}
.occpick-tag b{font-weight:600}
.occpick-tag button{color:var(--paper);opacity:.6;font-size:12px;line-height:1;padding:2px}
.occpick-tag button:hover{opacity:1}

/* kategori listesi — alt alta, tıklanan kategori yerinde açılıyor */
.occpick-cats{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.occpick-katblok{border:1px solid var(--line);border-radius:var(--r);background:var(--card);
  overflow:hidden;transition:border-color .14s}
.occpick-katblok.acik{border-color:var(--ink)}
.occpick-cat{display:flex;align-items:center;gap:10px;width:100%;padding:11px 14px;
  text-align:left;background:none;border:0;
  font-size:14px;font-weight:600;color:var(--ink-2);line-height:1.25;
  transition:color .14s}
.occpick-cat:hover{color:var(--ink)}
.occpick-katblok.acik .occpick-cat{color:var(--ink);border-bottom:1px solid var(--line-soft)}
.occpick-katic{padding:12px 14px 14px;display:grid;gap:10px;background:var(--paper-2)}
.occpick-cat svg{flex-shrink:0;color:var(--muted)}
.occpick-cat span{flex:1;min-width:0}
.occpick-cat em{font-style:normal;font-size:12px;color:var(--muted);
  font-variant-numeric:tabular-nums}
.occpick-cat b{font-size:11.5px;font-weight:700;color:var(--paper);background:var(--green);
  border-radius:9px;padding:1px 8px}

/* kategori içi */
.occpick-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.occpick-katad{font-size:13.5px;font-weight:700;color:var(--ink)}
.occpick-back{font-size:13px;font-weight:600;color:var(--muted)}
.occpick-yeni{justify-self:start;margin-top:2px;padding:9px 15px;border-radius:22px;
  border:1px dashed var(--line);background:var(--card);
  font-size:13.5px;font-weight:600;color:var(--ink-2)}
.occpick-yeni:hover{border-color:var(--ink);color:var(--ink)}
.occpick-back:hover{color:var(--ink)}
.occpick-all{margin-left:auto;font-size:13px;font-weight:600;color:var(--green-ink);
  text-decoration:underline;text-underline-offset:3px}
.occpick-all:hover{color:var(--ink)}
.occpick-occs{display:flex;flex-wrap:wrap;gap:8px}
.occpick-occ{border:1px solid var(--line);background:var(--card);color:var(--ink-2);
  padding:9px 15px;border-radius:22px;font-size:14px;font-weight:600;
  transition:border-color .14s,background .14s,color .14s}
.occpick-occ:hover{border-color:var(--ink);color:var(--ink)}
.occpick-occ.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.occpick-occ.on::before{content:"✓ ";font-size:12px}
.occpick-bos{font-size:13.5px;color:var(--muted)}
.catpick-body:empty{display:none}
/* Uzun liste sayfayı aşağı doğru büyütüp alttaki sabit çubuğun
   altına giriyordu: çubuk tıklamayı yutuyor, kategoriye basılmıyordu.
   Liste artık kendi içinde kayan sabit yükseklikli bir panel. */
.catpick-body,.occpick-body{max-height:min(340px,46vh);overflow-y:auto;
  overscroll-behavior:contain}

/* tek seçimlik kutunun seçili hâli */
.occpick-done{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.occpick-done small{font-size:12.5px;color:var(--muted)}
.occpick-change{margin-left:auto;font-size:13px;font-weight:600;color:var(--green-ink);
  text-decoration:underline;text-underline-offset:3px}
.occpick-change:hover{color:var(--ink)}
@media(max-width:520px){
  .occpick-change,.occpick-all{margin-left:0}
}

/* baloncuk seçim — kısa listeli tek seçimlik sorular */
.balon{display:flex;flex-wrap:wrap;gap:9px}
.balon button{border:1px solid var(--line);background:var(--card);color:var(--ink-2);
  padding:10px 17px;border-radius:22px;font-size:14px;font-weight:600;
  transition:border-color .14s,background .14s,color .14s}
.balon button:hover{border-color:var(--ink);color:var(--ink)}
.balon button[aria-checked="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* ============================================================
   KURULUM GİRİŞİ (Fiverr seller_onboarding/overview düzeni)
   Solda üç adımın dökümü ve tek düğme, sağda ne kuracağımızı
   gösteren kart. Adım şeridi bu ekranda sönük duruyor.
   ============================================================ */
.setup.at-overview .stepbar .st{opacity:.45}
.setup.at-overview .setup-body{max-width:1080px}

.ov{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:64px;align-items:start;padding-top:26px}
.ov-copy h1{font-size:clamp(26px,3.2vw,36px);font-weight:800;letter-spacing:-.035em;
  line-height:1.2;color:var(--ink);margin-bottom:30px;font-family:var(--display)}
.ov-list{list-style:none;margin:0 0 32px;padding:0;border-top:1px solid var(--line-soft)}
.ov-list li{display:flex;gap:16px;padding:20px 2px;border-bottom:1px solid var(--line-soft)}
.ov-list .ico{flex-shrink:0;color:var(--ink);margin-top:1px}
.ov-list b{display:block;font-size:15.5px;font-weight:700;color:var(--ink);margin-bottom:4px}
.ov-list p{font-size:14px;color:var(--muted);line-height:1.55;max-width:52ch}
.ov-note{margin-top:14px;font-size:13px;color:var(--muted)}

/* sağdaki görsel: kart, kareli lacivert zeminin üstünde */
.ov-art{position:relative;border-radius:var(--r-lg);overflow:hidden;
  background:var(--navy);padding:52px 40px;display:grid;place-items:center;min-height:340px}
.ov-art::before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:64px 64px}
.ov-card{position:relative;width:min(280px,100%);background:var(--card);
  border-radius:var(--r-lg);padding:26px 22px;text-align:center;
  box-shadow:0 18px 44px rgba(0,0,0,.28)}
.ov-card-top{display:flex;justify-content:center;margin-bottom:14px}
.ov-card b{display:block;font-size:16.5px;font-weight:700;color:var(--ink);margin-bottom:6px}
.ov-card small{display:block;font-size:13px;color:var(--muted);line-height:1.5}
.ov-card-meta{display:flex;justify-content:center;gap:16px;margin-top:16px;
  padding-top:14px;border-top:1px solid var(--line-soft);font-size:12.5px;color:var(--muted)}

/* adım şeridinin sağındaki tamamlanma oranı */
.st-pct{margin-left:auto;padding-left:22px;margin-right:2px;text-align:right;
  white-space:nowrap;list-style:none;display:block}
.st-pct small{display:block;font-size:11px;color:var(--muted);line-height:1.2}
.st-pct b{font-size:13.5px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}

@media(max-width:900px){
  .ov{grid-template-columns:minmax(0,1fr);gap:34px}
  .ov-art{order:-1;min-height:0;padding:34px 24px}
  .ov-copy h1{margin-bottom:22px}
}
@media(max-width:820px){
  .setup-top .stepbar .st-pct{display:none}
  /* Dar ekranda adım etiketleri sığmıyordu: "Bilgiler" 21 piksellik
     dairenin içine harf harf sarılıp kurulum başlığını 260 piksel
     yüksekliğe çıkarıyordu. Etiketler gizleniyor, sıra numaraları
     kalıyor. */
  .setup-top .stepbar .st span{display:none}
  .setup-top .stepbar{gap:10px;margin:0 0 0 auto;padding:0;flex:0 1 auto;min-width:0;
    height:26px;align-items:center;justify-content:flex-end}
  .setup-top .stepbar .st{height:26px;flex:0 0 auto;align-self:center}
  .setup-top .row{gap:12px;height:58px;flex-wrap:nowrap}
  .setup-top .brand{flex-shrink:0}
  .setup-top .leave{font-size:13px;flex-shrink:0;order:3}
}

/* iş fotoğrafları */
.workshots{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px}
.workshots.busy{opacity:.5;pointer-events:none}
.ws{position:relative;margin:0;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;
  background:var(--paper-2);border:1px solid var(--line)}
.ws img{width:100%;height:100%;object-fit:cover}
.ws-del{position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:50%;
  background:rgba(21,21,21,.62);color:#fff;font-size:12px;line-height:1;
  display:grid;place-items:center;backdrop-filter:blur(2px)}
.ws-del:hover{background:var(--danger)}
.ws-add{aspect-ratio:4/3;border:1.5px dashed var(--line);border-radius:var(--r);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  cursor:pointer;color:var(--muted);transition:border-color .15s,color .15s}
.ws-add:hover{border-color:var(--ink);color:var(--ink)}
.ws-add span{font-size:22px;line-height:1}
.ws-add small{font-size:11.5px;text-align:center;padding:0 6px}

/* ============================================================
   AŞAMA FORMU (Fiverr gig oluşturma düzeni)
   Solda yapışkan bölüm listesi, ortada iki sütunlu alanlar,
   altta eksik sayacını taşıyan sabit çubuk.
   ============================================================ */
.fx{display:grid;grid-template-columns:212px minmax(0,1fr);gap:40px;align-items:start}

/* --- bölüm listesi --- */
/* Bağlantıların kendi 12px iç boşluğu var; ray o kadar sola
   kaydırılınca bölüm adları başlıkla aynı hizaya geliyor. */
.fx-rail{position:sticky;top:96px;margin-left:-12px}
.fx-rail ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.fx-rail a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;
  font-size:13.5px;color:var(--muted);transition:background .14s,color .14s}
.fx-rail a:hover{background:var(--paper-2);color:var(--ink)}
.fx-rail a.now{background:var(--paper-2);color:var(--ink);font-weight:600}
.fx-rail a i{width:18px;height:18px;flex-shrink:0;border-radius:50%;
  border:1.5px solid var(--line);display:grid;place-items:center;
  font-style:normal;font-size:10px;font-weight:700;line-height:1}
.fx-rail a.part i{border-color:var(--amber)}
.fx-rail a.ok i{background:var(--green);border-color:var(--green);color:#fff}
.fx-rail a span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fx-rail a em{font-style:normal;font-size:11.5px;color:var(--muted);
  font-variant-numeric:tabular-nums;flex-shrink:0}

/* --- bölümler --- */
.fx-sec{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);
  padding:8px 30px 26px;margin-bottom:16px;scroll-margin-top:96px}
.fx-sec h3{font-size:15px;font-weight:700;color:var(--ink);
  padding:22px 0 16px;border-bottom:1px solid var(--line-soft);margin-bottom:4px}

/* --- alan satırı: solda etiket, sağda kontrol --- */
.fx-row{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:28px;padding:22px 0;border-bottom:1px solid var(--line-soft);
  scroll-margin-top:110px;border-radius:6px;transition:background .3s}
.fx-row:last-child{border-bottom:0;padding-bottom:6px}
.fx-row.solo{grid-template-columns:minmax(0,1fr)}
.fx-row.flash{background:#fbf1d9}
.fx-lbl label,.fx-lbl .fx-q{display:block;font-size:14.5px;font-weight:600;color:var(--ink);
  line-height:1.35}
.fx-lbl .opt{display:block;margin-top:4px;padding:0;border:0;background:none;
  border-radius:0;font-size:12px;font-weight:400;color:var(--muted);opacity:.72}
.fx-lbl p{margin-top:7px;font-size:13px;color:var(--muted);line-height:1.55}
.fx-ctl .help{font-size:12.5px;color:var(--muted);margin-top:7px}
.fx-ctl .err{margin-top:7px}
.fx-count{margin-top:6px;font-size:12px;color:var(--muted);text-align:right;
  font-variant-numeric:tabular-nums}
.fx-count.short{color:var(--amber-ink)}
.fx-count.ok{color:var(--green-ink)}

/* --- alttaki sabit çubuk --- */
/* Saydam geçiş yerine düz zemin: altından kayan metin okunuyordu. */
/* "başka bir iş kategorisi ekle" — bölümlerin en altında */
.fx-addcat{display:block;width:100%;margin-bottom:16px;padding:16px;border-radius:var(--r-lg);
  border:1.5px dashed var(--line);background:var(--card);
  font-size:14.5px;font-weight:600;color:var(--ink-2);transition:border-color .15s,color .15s}
.fx-addcat:hover{border-color:var(--ink);color:var(--ink)}

.fx-bar{position:sticky;bottom:0;z-index:20;display:flex;align-items:center;
  gap:16px;flex-wrap:wrap;margin-top:14px;padding:14px 0 16px;
  background:var(--paper);border-top:1px solid var(--line-soft);
  box-shadow:0 -10px 18px -12px rgba(21,21,21,.2)}
.fx-miss{flex:1;min-width:0;font-size:13.5px}
.fx-miss button{color:var(--amber-ink);font-weight:600;text-decoration:underline;
  text-underline-offset:3px}
.fx-miss button:hover{color:var(--ink)}
.fx-miss .all-ok{color:var(--green-ink);font-weight:600}
.fx-acts{display:flex;gap:12px;align-items:center}

@media(max-width:1080px){
  .fx{grid-template-columns:minmax(0,1fr);gap:0}
  .fx-rail{display:none}
}
@media(max-width:780px){
  .fx-row{grid-template-columns:minmax(0,1fr);gap:10px;padding:18px 0}
  .fx-sec{padding:6px 18px 20px}
  .fx-bar{flex-direction:column;align-items:stretch}
  .fx-acts{flex-direction:column-reverse}
  .fx-acts .btn{width:100%}
}

/* ============================================================
   CV sayfası (/cv)
   Ekranda kart, yazdırırken A4. Yazdırma kuralları site
   kabuğunu gizler; renk yerine çizgi ve boşlukla ayırır.
   ============================================================ */
.cv-shell{padding-top:30px;padding-bottom:48px;max-width:960px}
.cv-bar{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  flex-wrap:wrap;margin-bottom:22px}
.cv-bar h1{font-size:clamp(24px,3vw,32px);font-weight:800;letter-spacing:-.03em;
  color:var(--ink);font-family:var(--display)}
.cv-bar .lede{font-size:14.5px;color:var(--muted);max-width:56ch;margin-top:6px}
.cv-acts{display:flex;gap:10px;flex-wrap:wrap}

.cv-sheet{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:40px 44px 34px}
.cv-head{display:flex;gap:24px;align-items:flex-start;justify-content:space-between;
  padding-bottom:20px;border-bottom:2px solid var(--ink)}
.cv-head h1{font-size:30px;font-weight:800;letter-spacing:-.03em;color:var(--ink);
  font-family:var(--display);line-height:1.1}
.cv-role{margin-top:6px;font-size:16px;font-weight:600;color:var(--green-ink)}
.cv-meta{margin-top:4px;font-size:13.5px;color:var(--muted)}
.cv-goal{margin-top:6px;font-size:13.5px;color:var(--muted);max-width:60ch}
.cv-tag{margin-top:6px;font-size:14px;color:var(--ink-2);max-width:60ch}
.cv-photo{width:96px;height:96px;border-radius:50%;object-fit:cover;flex-shrink:0;
  border:1px solid var(--line)}

.cv-sec{padding-top:22px}
.cv-sec h2{font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-bottom:12px}
.cv-sec p{font-size:14px;color:var(--ink-2);line-height:1.6}

.cv-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px 26px}
.cv-list div{border-bottom:1px solid var(--line-soft);padding-bottom:8px}
.cv-list dt{font-size:12.5px;color:var(--muted);margin-bottom:3px}
.cv-list dd{font-size:14px;color:var(--ink);font-weight:600;line-height:1.4}

.cv-jobs{display:grid;gap:16px}
.cv-job{border-left:2px solid var(--line);padding-left:14px}
.cv-job-top{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.cv-job-top b{font-size:15.5px;font-weight:700;color:var(--ink)}
.cv-job-top span{font-size:13px;color:var(--muted)}
.cv-job-top em{font-style:normal;font-size:13px;color:var(--green-ink);font-weight:600}
.cv-job-head{margin-top:4px;font-weight:600;color:var(--ink-2)}

.cv-tags{display:flex;flex-wrap:wrap;gap:7px}
.cv-tags span{border:1px solid var(--line);border-radius:20px;padding:5px 13px;
  font-size:13px;color:var(--ink-2)}
.cv-notes{margin:0;padding-left:18px;display:grid;gap:8px}
.cv-notes li{font-size:14px;color:var(--ink-2);line-height:1.6}
.cv-foot{margin-top:26px;padding-top:14px;border-top:1px solid var(--line-soft);
  font-size:12px;color:var(--muted);text-align:right}

@media(max-width:640px){
  .cv-sheet{padding:26px 20px 22px}
  .cv-head{flex-direction:column-reverse;align-items:flex-start}
}

/* Başvurulan mesleğin bloğu CV'nin başında ve işaretli. */
.cv-job.focus{border-left-color:var(--green)}

/* ---------- yazdırma / PDF ----------
   ATS (özgeçmiş tarayan yazılım) düz metin okur: tek sütun, siyah
   yazı, standart başlıklar, rozet ve çerçeve yok. Ekranda güzel
   duran her şey burada sadeleşiyor ki metin doğru ayrıştırılsın. */
@media print{
  .no-print,.cv-bar,#siteHeader,#siteFooter,#cvNotice,
  header.hdr,.cats,footer,.drawer,.modal{display:none !important}
  body{background:#fff;color:#000;font-size:10.5pt;line-height:1.42}
  .cv-shell{padding:0;max-width:none}
  .cv-sheet{border:0;border-radius:0;padding:0;background:#fff;box-shadow:none}
  .cv-head{border-bottom:1px solid #000;padding-bottom:8pt}
  .cv-head h1{font-size:20pt;color:#000}
  .cv-role,.cv-tag,.cv-goal,.cv-meta{color:#000}
  .cv-photo{display:none}                   /* fotoğraf ATS'i şaşırtıyor */
  .cv-sec{page-break-inside:avoid;padding-top:12pt}
  .cv-sec h2{font-size:11pt;letter-spacing:.06em;color:#000;border-bottom:0;
    border-top:1px solid #999;padding-top:6pt}
  .cv-sec p,.cv-list dd,.cv-notes li{color:#000}
  /* Tek sütun: iki sütunlu ızgara PDF'te satırları karıştırıyor. */
  .cv-list{display:block}
  .cv-list div{border-bottom:0;padding:0 0 3pt;display:flex;gap:6pt}
  .cv-list dt{color:#000;margin:0;min-width:34%}
  .cv-list dt::after{content:":"}
  .cv-job{page-break-inside:avoid;border-left:0;padding-left:0}
  .cv-job-top b{font-size:11.5pt}
  /* Beceriler rozet değil, virgülle ayrılmış düz metin olarak. */
  .cv-tags{display:block}
  .cv-tags span{border:0;padding:0;font-size:10.5pt;color:#000}
  .cv-tags span::after{content:", "}
  .cv-tags span:last-child::after{content:""}
  .cv-foot{border-top:1px solid #999;color:#000}
  @page{margin:16mm}
}

/* ============================================================
   Listeleme filtreleri — Fiverr düzeni
   Geniş ekranda filtreler solda sütun değil, sonuçların üstünde
   açılır düğme şeridi. İşaretlenenler altta çıkarılabilir rozet
   olarak duruyor. Dar ekranda eski çekmece düzeni sürüyor.
   ============================================================ */
@media(min-width:981px){
  .layout{grid-template-columns:minmax(0,1fr);gap:0}
  .filters{position:static;max-height:none;overflow:visible;border:0;background:none;
    border-radius:0;display:flex;flex-wrap:wrap;gap:10px;align-items:center;
    margin-bottom:20px;padding:0}
  .filters-head{display:none}
  /* Başvurular ekranının solundaki "ilanlarım" listesi bir filtre
     çubuğu değil; yatay bara çevrilince sol sütun eziliyordu.
     O sütun eski kart düzeninde kalıyor. */
  .layout:has(.joblist-side){grid-template-columns:300px minmax(0,1fr);gap:26px}
  .filters.joblist-side{position:sticky;top:calc(var(--nav-h) + 16px);display:block;
    border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);
    max-height:calc(100vh - var(--nav-h) - 40px);overflow-y:auto;margin-bottom:0;padding:0}
  .filters.joblist-side .filters-head{display:flex}
  /* yalnızca grupların kabı saydamlaşsın; başlık kutusu değil */
  .filters #sideBody{display:contents}
  .filters .fgrp{border:0;position:relative}
  .filters .fgrp-head{width:auto;height:42px;padding:0 16px;gap:8px;
    border:1px solid var(--line);border-radius:24px;background:var(--card);
    font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap}
  .filters .fgrp-head:hover{background:var(--card);border-color:var(--ink)}
  .filters .fgrp[data-open="true"] .fgrp-head{border-color:var(--ink);
    box-shadow:0 0 0 3px rgba(21,21,21,.06)}
  .filters .fgrp-head .sum{display:none}
  .filters .fgrp-head svg{transform:none;color:var(--ink)}
  .filters .fgrp[data-open="false"] .fgrp-head svg{transform:none}
  .filters .fgrp-body{position:absolute;top:calc(100% + 10px);left:0;z-index:45;
    min-width:320px;max-width:420px;max-height:min(420px,60vh);overflow-y:auto;
    background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
    box-shadow:0 18px 44px rgba(21,21,21,.16);padding:16px 18px}
  /* sağa taşan panel ekranın dışına çıkmasın */
  .filters .fgrp:nth-last-child(-n+2) .fgrp-body{left:auto;right:0}
}

/* ============================================================
   2. AŞAMA — TANIŞMA SOHBETİ (Fiverr mesajlaşma düzeni)
   Solda tek beyaz konuşma kartı, sağda yapışkan "profil haritası"
   rayı. Mesajlar baloncuk değil: avatar + ad + saat, altında düz
   metin. /tanisalim ekranındaki .bubble düzenine dokunulmuyor.
   ============================================================ */
.talk2{display:grid;grid-template-columns:minmax(0,1fr) 316px;gap:22px;
  align-items:start;margin:0 0 40px}
@media(max-width:1000px){.talk2{grid-template-columns:minmax(0,1fr)}}

.talk2-main{background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column}

.talk2-head{display:flex;align-items:center;gap:12px;padding:14px 20px;
  border-bottom:1px solid var(--line-soft)}
.talk2-av{width:40px;height:40px;border-radius:50%;background:var(--navy);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:15px;flex-shrink:0}
.talk2-head b{display:block;font-size:15px;line-height:1.3}
.talk2-head small{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.talk2-head .pill-ok{margin-left:auto}

.pill-ok{display:inline-flex;align-items:center;gap:6px;background:var(--green-soft);
  color:var(--green-ink);border-radius:999px;padding:5px 12px;font-size:12.5px;font-weight:600;
  white-space:nowrap}
.pill-ok::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green)}

/* Fiverr'ın konuşma üstündeki ince güvence şeridi. */
.talk2-note{display:flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 20px;background:var(--paper);border-bottom:1px solid var(--line-soft);
  font-size:12.5px;color:var(--muted);text-align:center}
.talk2-note svg{flex-shrink:0;color:var(--green-ink)}

.talk2-flow{padding:22px 20px 6px;min-height:340px;display:flex;flex-direction:column}
@media(max-width:620px){.talk2-flow{padding:16px 14px 4px;min-height:260px}
  /* Dar ekranda "Sohbet sürüyor" pili ismi iki satıra kırıyordu. */
  .talk2-head .pill-ok{display:none}
  .talk2-head{padding:12px 14px}}

/* max-width / flex-direction, mesajlar sayfasının .msg baloncuk
   kuralından sızıyor; burada açıkça sıfırlanıyor. */
.talk2-flow .msg{display:flex;flex-direction:row;align-items:flex-start;
  max-width:none;gap:12px;margin-bottom:20px;
  animation:msgIn .3s cubic-bezier(.2,.9,.3,1.1) both}
.talk2-flow .msg.me{align-self:auto;align-items:flex-start}
@keyframes msgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.talk2-flow .msg{animation:none}}
.talk2-flow .msg-av{width:32px;height:32px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  font-size:11.5px;font-weight:700;color:#fff;background:var(--navy)}
.talk2-flow .msg.me .msg-av{background:var(--green)}
.talk2-flow .msg-body{min-width:0;flex:1}
.talk2-flow .msg-head{display:flex;align-items:baseline;gap:9px;margin-bottom:3px}
.talk2-flow .msg-head b{font-size:14px;color:var(--ink)}
.talk2-flow .msg-head time{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.talk2-flow .msg-txt{font-size:15.5px;line-height:1.6;color:var(--ink);white-space:pre-line;
  overflow-wrap:anywhere;margin:0}
.talk2-flow .msg.me .msg-txt{display:inline-block;background:var(--paper);border:1px solid var(--line-soft);
  border-radius:var(--r-lg);padding:9px 14px}
.talk2-flow .msg.me.skipped .msg-txt{background:none;border-style:dashed;color:var(--muted);font-style:italic}
.talk2-flow .msg-hint{margin:6px 0 0 44px;font-size:13px;line-height:1.55;color:var(--muted)}

/* yazıyor */
.talk2-flow .msg-typing{display:inline-flex;gap:4px;align-items:center;height:22px}
.talk2-flow .msg-typing i{width:6px;height:6px;border-radius:50%;background:var(--muted);
  animation:typing 1.1s infinite ease-in-out both}
.talk2-flow .msg-typing i:nth-child(2){animation-delay:.16s}
.talk2-flow .msg-typing i:nth-child(3){animation-delay:.32s}

/* ---- yazma alanı: Fiverr'ın çerçeveli kutusu ---- */
.talk2-compose{border-top:1px solid var(--line-soft);padding:14px 20px 16px;
  background:var(--card);position:sticky;bottom:0}
@media(max-width:620px){.talk2-compose{padding:12px 14px 14px}}
.talk2-quick{display:flex;align-items:center;gap:8px;margin-bottom:9px;
  font-size:12.5px;font-weight:600;color:var(--muted)}
.talk2-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;
  max-height:184px;overflow-y:auto}
.talk2-box{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);
  transition:border-color .15s,box-shadow .15s}
.talk2-box:focus-within{border-color:var(--navy);box-shadow:0 0 0 3px rgba(15,39,64,.08)}
.talk2-box.bad{border-color:var(--danger)}
.talk2-box textarea,.talk2-box input{width:100%;border:0;background:transparent;color:var(--ink);
  font-size:15.5px;line-height:1.6;resize:none;padding:12px 14px 4px;font-family:inherit;
  display:block;max-height:200px}
.talk2-box textarea:focus,.talk2-box input:focus{outline:none}
.talk2-box textarea::placeholder,.talk2-box input::placeholder{color:var(--muted)}
.talk2-boxfoot{display:flex;align-items:center;gap:12px;padding:6px 10px 9px 14px}
.talk2-boxfoot .cnt{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;
  margin-left:auto}
.btn-send{display:inline-flex;align-items:center;gap:7px;background:var(--green);color:#fff;
  border-radius:var(--r);padding:8px 16px;font-size:14px;font-weight:600;line-height:1.2;
  transition:opacity .15s}
.btn-send:hover{opacity:.9}
.btn-send:disabled{opacity:.4;cursor:default}
.talk2-foot{display:flex;align-items:center;gap:16px;margin-top:11px;font-size:12.5px;
  color:var(--muted);flex-wrap:wrap}
.talk2-foot button{font-size:13px;color:var(--muted);text-decoration:underline}
.talk2-foot button:hover{color:var(--ink)}
.talk2-foot .sayac{margin-left:auto;font-variant-numeric:tabular-nums}

/* ---- sağ ray: profil haritası ---- */
.talk2-rail{position:sticky;top:calc(var(--nav-h) + 14px);display:flex;flex-direction:column;gap:14px}
@media(max-width:1000px){.talk2-rail{position:static}}
.rail-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:16px 18px}
.rail-card h3{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin:0 0 12px}
.rail-map{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
.rail-map li{display:flex;align-items:flex-start;gap:10px;padding:7px 0;font-size:13.5px;
  line-height:1.4;color:var(--muted);position:relative}
.rail-map li::after{content:"";position:absolute;left:9px;top:26px;bottom:-3px;width:1px;
  background:var(--line-soft)}
.rail-map li:last-child::after{display:none}
.rail-map i{width:19px;height:19px;border-radius:50%;border:1.5px solid var(--line);
  flex-shrink:0;margin-top:1px;background:var(--card);display:grid;place-items:center;
  font-size:11px;font-style:normal;color:transparent;z-index:1;transition:all .2s}
.rail-map li.ok{color:var(--ink)}
.rail-map li.ok i{background:var(--green);border-color:var(--green);color:#fff}
.rail-pct{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px}
.rail-pct small{font-size:12.5px;color:var(--muted)}
.rail-pct b{font-size:24px;font-family:var(--display);font-variant-numeric:tabular-nums}
.rail-bar{height:5px;border-radius:999px;background:var(--line-soft);overflow:hidden}
.rail-bar i{display:block;height:100%;background:var(--green);
  transition:width .4s cubic-bezier(.2,.9,.3,1)}
.rail-note{font-size:12.5px;color:var(--muted);line-height:1.5;margin:10px 0 0}

/* ---- sohbet sonu: derlenen özet kartı ---- */
.wrapup{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper);
  padding:18px 20px;margin:4px 0 20px}
.wrapup h3{font-size:15px;margin:0 0 4px}
.wrapup .lbl{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin:14px 0 5px}
.wrapup p{font-size:15px;line-height:1.6;margin:0;color:var(--ink-2)}
.wrapup .tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:7px}
.wrapup .tag{background:var(--card);border:1px solid var(--line);border-radius:999px;
  padding:5px 12px;font-size:13px}

/* ---- profil ekranı: elle / sohbetle kipi ---- */
.pmode{display:inline-flex;gap:4px;background:var(--paper-2);border-radius:999px;padding:4px;
  margin:0 0 22px}
.pmode button{border-radius:999px;padding:8px 18px;font-size:14px;font-weight:600;
  color:var(--muted);display:inline-flex;align-items:center;gap:7px;transition:all .15s}
.pmode button[aria-selected="true"]{background:var(--card);color:var(--ink);
  box-shadow:0 1px 3px rgba(21,21,21,.08)}

/* Mesajlar: Fiverr'ın yazışma sağındaki künye rayı. Dar ekranda
   ve yazışma seçili değilken görünmez. */
.mail-about{display:none}
@media(min-width:1180px){
  /* Üçüncü sütun `auto`: yazışma seçili değilken ray gizleniyor ve
     kolon kendiliğinden kapanıyor, boş şerit kalmıyor. */
  .mail{grid-template-columns:300px minmax(0,1fr) auto}
  .mail-about{display:block;width:280px;border-left:1px solid var(--line);
    overflow-y:auto;padding:16px;background:var(--paper)}
  .mail-about[hidden]{display:none}
}
.mail-about-card{background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:14px 16px;margin-bottom:12px}
.mail-about-card h3{font-size:11.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin:0 0 11px}
.mail-about-who{display:flex;align-items:center;gap:11px;margin-bottom:13px}
.mail-about-who .avt{width:42px;height:42px;font-size:15px;flex-shrink:0}
.mail-about-who b{display:block;font-size:14.5px;color:var(--ink);line-height:1.3}
.mail-about-who small{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.mail-about-rows{display:flex;flex-direction:column;gap:1px;background:var(--line-soft);
  border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden}
.mail-about-rows div{display:flex;justify-content:space-between;gap:10px;
  background:var(--card);padding:9px 12px;font-size:13px}
.mail-about-rows span{color:var(--muted)}
.mail-about-rows b{color:var(--ink);font-weight:600;text-align:right}
.mail-about-link{font-size:13.5px;color:var(--link);text-decoration:underline;line-height:1.45}

/* ============================================================
   PROFİL YORUMLARI  (/calisan, /danisman, /isveren)
   Fiverr'ın değerlendirme bloğu: üstte ortalama ve yıldızlar,
   altında sade kartlar — avatar, ad, rol, tarih ve yazı.
   ============================================================ */
.rv-summary{display:flex;align-items:center;gap:10px;margin-bottom:16px;
  font-size:14px;color:var(--muted)}
.rv-summary b{font-size:17px;color:var(--ink);font-variant-numeric:tabular-nums}
.rv-stars{display:inline-flex;gap:2px;align-items:center}
.rv-star{display:inline-grid;place-items:center;color:var(--line);line-height:0}
.rv-star.on{color:var(--amber)}
.rv-stars.pick .rv-star{cursor:pointer;padding:3px;transition:transform .1s}
.rv-stars.pick .rv-star:hover{transform:scale(1.15)}

.rv-form{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);
  padding:16px 18px;margin-bottom:22px}
.rv-row{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.rv-row .lbl{font-size:13.5px;font-weight:600;color:var(--ink)}
.rv-form textarea{width:100%;border:1px solid var(--line);border-radius:var(--r);
  background:var(--paper);color:var(--ink);font-family:inherit;font-size:15px;
  line-height:1.55;padding:11px 13px;resize:vertical;min-height:96px}
.rv-form textarea:focus{outline:none;border-color:var(--navy);
  box-shadow:0 0 0 3px rgba(15,39,64,.08)}
.rv-formfoot{display:flex;align-items:center;gap:12px;margin-top:11px}
.rv-count{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums;margin-right:auto}
.rv-note{font-size:13.5px;color:var(--muted);margin-bottom:18px}
.rv-note a{color:var(--link);text-decoration:underline}

.rv-list{display:flex;flex-direction:column;gap:0}
.rv-card{padding:18px 0;border-top:1px solid var(--line-soft)}
.rv-card:first-child{border-top:0;padding-top:2px}
.rv-head{display:flex;align-items:center;gap:11px;margin-bottom:9px}
.rv-head .avt{width:40px;height:40px;font-size:14px;flex-shrink:0}
.rv-who{min-width:0;flex:1}
.rv-who b{display:block;font-size:14.5px;color:var(--ink);line-height:1.3}
.rv-who small{display:block;font-size:12.5px;color:var(--muted);margin-top:1px}
.rv-meta{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex-shrink:0}
.rv-meta time{font-size:12px;color:var(--muted)}
.rv-text{font-size:15px;line-height:1.6;color:var(--ink-2);white-space:pre-line;
  overflow-wrap:anywhere;margin:0}
.rv-acts{display:flex;gap:14px;margin-top:9px}
.rv-acts button{font-size:12.5px;color:var(--muted);text-decoration:underline}
.rv-acts button:hover{color:var(--ink)}
@media(max-width:560px){
  .rv-meta{align-items:flex-start}
  .rv-head{flex-wrap:wrap}
}

/* ---- işveren profilindeki açık ilan listesi ---- */
.emp-jobs{display:flex;flex-direction:column;gap:1px;background:var(--line-soft);
  border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden}
.emp-job{display:flex;align-items:center;gap:14px;justify-content:space-between;
  background:var(--card);padding:14px 16px;transition:background .13s}
.emp-job:hover{background:var(--paper-2)}
.emp-job b{display:block;font-size:14.5px;color:var(--ink);line-height:1.35}
.emp-job small{display:block;font-size:12.5px;color:var(--muted);margin-top:3px}
.emp-job-pay{font-size:13.5px;font-weight:600;color:var(--ink);white-space:nowrap}

/* ============================================================
   AKIŞ  (/akis) — giriş yapan kişinin kendi ekranı
   Üç sütun: solda kimlik ve kısayollar, ortada geçmiş/başvuru/
   hareketler, sağda öneriler. Dar ekranda tek sütuna iner.
   ============================================================ */
.fd{display:grid;grid-template-columns:280px minmax(0,1fr) 300px;gap:22px;
  align-items:start;padding:24px 0 70px}

.fd-left{position:sticky;top:calc(var(--nav-h) + 16px);display:flex;flex-direction:column;gap:14px}
.fd-right{position:sticky;top:calc(var(--nav-h) + 16px);display:flex;flex-direction:column;gap:14px}
/* Orta genişlikte sağ ray alta iner ve iki sütuna yayılır — bu blok
   temel kuralların ardında durmalı, yoksa display:flex geri alıyor. */
@media(max-width:1180px){
  .fd{grid-template-columns:260px minmax(0,1fr)}
  .fd-right{position:static;grid-column:1 / -1;display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
}
.fd-mid{display:flex;flex-direction:column;gap:16px;min-width:0}

.fd-card,.fd-id{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:18px 20px}
.fd-card h2{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin:0 0 14px}
.fd-id{padding:0;overflow:hidden}
.fd-id-top{padding:22px 20px 18px;text-align:center;border-bottom:1px solid var(--line-soft)}
.fd-id-top .avt{margin:0 auto 12px}
.fd-id-top h1{font-size:19px;font-weight:700;letter-spacing:-.02em;line-height:1.25;color:var(--ink)}
.fd-id-top p{font-size:13.5px;color:var(--ink-2);margin-top:5px;line-height:1.45}
.fd-city{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--muted);margin-top:8px}

.fd-score{padding:16px 20px;border-bottom:1px solid var(--line-soft)}
.fd-score-top{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px}
.fd-score-top small{font-size:12.5px;color:var(--muted)}
.fd-score-top b{font-size:20px;font-family:var(--display);font-variant-numeric:tabular-nums}
.fd-hint{font-size:12.5px;color:var(--muted);line-height:1.5;margin-top:9px}

.fd-links{display:flex;flex-direction:column;padding:8px 0}
.fd-links a{display:flex;align-items:center;gap:10px;padding:10px 20px;font-size:14px;
  color:var(--ink-2);transition:background .12s}
.fd-links a:hover{background:var(--paper-2);color:var(--ink)}
.fd-links svg{width:17px;height:17px;flex-shrink:0;color:var(--muted)}
.fd-badge{margin-left:auto;background:var(--green);color:#fff;border-radius:999px;
  font-size:11px;font-weight:700;padding:2px 7px}

.fd-hello h2{font-size:26px;font-weight:800;letter-spacing:-.03em;color:var(--ink);line-height:1.15}
.fd-hello p{font-size:14.5px;color:var(--muted);margin-top:6px;max-width:60ch}

.fd-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:var(--line-soft);border:1px solid var(--line-soft);border-radius:var(--r-lg);overflow:hidden}
.fd-stats div,.fd-stats a{background:var(--card);padding:14px 12px;text-align:center;
  display:block;transition:background .14s}
.fd-stats a:hover{background:var(--paper-2)}
.fd-stats b{display:block;font-size:22px;font-family:var(--display);letter-spacing:-.02em;color:var(--ink)}
.fd-stats small{display:block;font-size:12px;color:var(--muted);margin-top:2px}
@media(max-width:560px){.fd-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* iş geçmişi */
.fd-jobs{display:flex;flex-direction:column;gap:2px}
.fd-job{display:flex;gap:13px;align-items:flex-start;padding:14px 0;
  border-top:1px solid var(--line-soft)}
.fd-job:first-child{border-top:0;padding-top:0}
.fd-job-ico{width:38px;height:38px;border-radius:var(--r);background:var(--paper-2);
  display:grid;place-items:center;color:var(--muted);flex-shrink:0}
.fd-job > div{flex:1;min-width:0}
.fd-job b{display:block;font-size:15.5px;color:var(--ink);line-height:1.3}
.fd-job-place{display:block;font-size:13.5px;color:var(--ink-2);margin-top:2px}
.fd-job small{display:block;font-size:12.5px;color:var(--muted);margin-top:3px}
.fd-job p{font-size:14px;color:var(--ink-2);line-height:1.5;margin-top:7px}
.fd-job .tags{margin-top:9px}
.fd-job-rate{text-align:right;font-size:15px;font-weight:700;color:var(--ink);white-space:nowrap}
.fd-job-rate small{display:block;font-size:11.5px;font-weight:400;color:var(--muted)}

.fd-more{display:inline-block;margin-top:14px;font-size:13px;color:var(--link);
  text-decoration:underline}
.fd-empty{font-size:14px;color:var(--muted);line-height:1.55}
.fd-empty a{color:var(--link);text-decoration:underline}

/* başvurular ve ilanlar */
.fd-apps{display:flex;flex-direction:column;gap:1px;background:var(--line-soft);
  border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden}
.fd-app{display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--card);padding:13px 15px;transition:background .12s}
.fd-app:hover{background:var(--paper-2)}
.fd-app b{display:block;font-size:14.5px;color:var(--ink);line-height:1.35}
.fd-app small{display:block;font-size:12.5px;color:var(--muted);margin-top:3px}
.fd-fresh{background:var(--green);color:#fff;border-radius:999px;font-size:11.5px;
  font-weight:700;padding:3px 9px;white-space:nowrap}

/* hareketler */
.fd-evs{display:flex;flex-direction:column}
.fd-ev{display:flex;gap:12px;padding:14px 0;border-top:1px solid var(--line-soft);
  align-items:flex-start}
.fd-ev:first-child{border-top:0;padding-top:0}
.fd-ev:hover b{text-decoration:underline}
.fd-ev-ico{width:34px;height:34px;border-radius:50%;background:var(--paper-2);
  display:grid;place-items:center;color:var(--muted);flex-shrink:0}
.fd-ev small{display:block;font-size:12px;color:var(--muted)}
.fd-ev b{display:block;font-size:14.5px;color:var(--ink);margin-top:2px;line-height:1.35}
.fd-ev p{font-size:13.5px;color:var(--ink-2);margin-top:4px;line-height:1.5}
.fd-ev .jstatus,.fd-ev .rv-stars{margin-top:7px}

/* sağ sütun */
.fd-matches{display:flex;flex-direction:column;gap:2px}
.fd-match{display:block;padding:12px 0;border-top:1px solid var(--line-soft)}
.fd-match:first-child{border-top:0;padding-top:0}
.fd-match b{display:block;font-size:14px;color:var(--ink);line-height:1.35}
.fd-match:hover b{text-decoration:underline}
.fd-match small{display:block;font-size:12.5px;color:var(--muted);margin-top:3px}
.fd-match span{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-top:4px}
.fd-revs{display:flex;flex-direction:column;gap:12px;margin-top:12px}
.fd-rev small{display:block;font-size:12.5px;font-weight:600;color:var(--ink)}
.fd-rev p{font-size:13.5px;color:var(--ink-2);line-height:1.5;margin-top:3px}

@media(max-width:820px){.fd{grid-template-columns:minmax(0,1fr);padding-top:16px}
  .fd-left{position:static}
  /* Dar ekranda kimlik kartı ortalanmış bir blok olarak ilk ekranı
     tamamen dolduruyordu; yatay şeride dönüyor ve akış yukarı
     geliyor. */
  .fd-id-top{display:flex;align-items:center;gap:14px;text-align:left;padding:16px}
  .fd-id-top .avt{margin:0;width:56px;height:56px;font-size:19px;flex-shrink:0}
  .fd-id-top h1{font-size:17px}
  .fd-id-top p{margin-top:3px;font-size:13px}
  .fd-city{margin-top:5px}
  .fd-id-who{min-width:0}}

/* ============================================================
   İLAN VER — adım listesi ve yöntem kartları
   Upwork/Airtasker düzeni: solda hangi adımda olduğun,
   sağda o adımın tek konusu.
   ============================================================ */
.wiz-steps{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:0}
.wiz-steps li{display:flex;align-items:center;gap:11px;padding:8px 0;font-size:13.5px;
  color:var(--muted);position:relative}
.wiz-steps li::after{content:"";position:absolute;left:11px;top:30px;bottom:-4px;width:1px;
  background:var(--line-soft)}
.wiz-steps li:last-child::after{display:none}
.wiz-steps i{width:23px;height:23px;border-radius:50%;border:1.5px solid var(--line);
  background:var(--card);display:grid;place-items:center;font-style:normal;font-size:11.5px;
  font-weight:700;flex-shrink:0;z-index:1;transition:all .2s}
.wiz-steps li.done{color:var(--ink-2)}
.wiz-steps li.done i{background:var(--green);border-color:var(--green);color:#fff}
.wiz-steps li.now{color:var(--ink);font-weight:700}
.wiz-steps li.now i{background:var(--ink);border-color:var(--ink);color:var(--paper)}
@media(max-width:900px){.wiz-steps{display:none}}

.pickcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.pickcard{display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-align:left;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);
  padding:22px 20px;transition:border-color .15s,box-shadow .15s,transform .1s}
.pickcard:hover{border-color:var(--ink);transform:translateY(-1px)}
.pickcard[aria-pressed="true"]{border-color:var(--ink);box-shadow:0 0 0 3px rgba(21,21,21,.06)}
.pickcard svg{color:var(--green-ink)}
.pickcard b{font-size:16px;color:var(--ink);line-height:1.3}
.pickcard span{font-size:13.5px;color:var(--muted);line-height:1.5}

/* Sohbetle hazırlama adımı tek sütun; sohbet bileşeninin kendisi
   kurulum ekranıyla ortak (.talk2). */
.wiz-grid .talk2-main{min-height:420px}

/* İlan formundaki mesleğe özel soru bloğu. Kutucuklar tıklanabilir
   görünmeli: `.field .opt` kuralı çerçeveyi sildiği için bu bölüm
   `.field` kullanmıyor, kendi sarmalayıcısı var. */
.occq{margin-top:26px;padding-top:22px;border-top:1px solid var(--line-soft)}
.occq h3{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin:0 0 4px}
.occq .occq-note{font-size:13px;color:var(--muted);margin:0 0 18px}
.occq-q{margin-bottom:20px}
.occq-lbl{display:block;font-size:14px;font-weight:600;color:var(--ink);margin-bottom:9px}
.occq-chips{display:flex;flex-wrap:wrap;gap:8px}
.occq-chips .opt{background:var(--card);border:1px solid var(--line);border-radius:999px;
  padding:9px 16px;font-size:14.5px;font-weight:500;color:var(--ink);line-height:1.2}
.occq-chips .opt:hover{border-color:var(--ink)}
.occq-chips .opt[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
/* Sohbette zorunlu olmayan soruların "geç" bağlantısı */
.talk2-skip{display:block;margin-top:10px;font-size:13px;color:var(--muted);
  text-decoration:underline}
.talk2-skip:hover{color:var(--ink)}

/* Hesap sayfasındaki işletme künyesi tablosu */
.kvlist{display:flex;flex-direction:column;gap:1px;background:var(--line-soft);
  border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden;margin-top:14px}
.kv{display:flex;justify-content:space-between;gap:14px;background:var(--card);
  padding:11px 14px;font-size:14px}
.kv span{color:var(--muted);flex-shrink:0}
.kv b{color:var(--ink);font-weight:600;text-align:right;overflow-wrap:anywhere}

/* ============================================================
   KULLANICI METNİ TAŞMASIN
   İlan metni, başlık ve profil anlatımları kullanıcıdan geliyor;
   boşluksuz uzun bir dizi (yapıştırılmış bağlantı, klavyeye
   yaslanmış bir satır) sayfayı yana kaydırıyordu.
   ============================================================ */
.detail-sec p,
.detail-hero h1,
.detail-hero .sub,
.job-head,
.summary .val,
.fd-job p,
.fd-job b,
.fd-app b,
.emp-job b,
.mega-blok a,
.cv-sec p,
.conv .last,
.qa p{overflow-wrap:anywhere}

/* ---------- iş türü rozeti ----------
   Günlük ve tek seferlik işler listede kaybolmasın diye renkli
   rozetle çıkıyor; sürekli işler düz yazı kalıyor. */
.jtype{font-size:13px;color:var(--muted)}
.jtype.short{display:inline-flex;align-items:center;gap:5px;
  padding:2px 10px;border-radius:999px;font-size:12px;font-weight:700;
  letter-spacing:-.01em;border:1px solid transparent}
.jtype.short::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.jtype.daily{color:#7a5a12;background:#fdf3dc;border-color:#efdcae}
.jtype.onetime{color:#12525a;background:#ddf1f2;border-color:#b6dde0}

/* hızlı süzgeç — ilan listesinin üstündeki tek tıklık daraltma */
.quickbar{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.quickbar button{padding:8px 15px;border-radius:999px;border:1px solid var(--line);
  background:var(--card);font-size:13.5px;font-weight:600;color:var(--ink-2);
  transition:border-color .14s,background .14s,color .14s}
.quickbar button:hover{border-color:var(--ink);color:var(--ink)}
.quickbar button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* İlan alarmı — misafiri listeyi görmeden engellemez; tek güçlü mavi
   yüzey looking'in kişi adına sürekli arama fikrini taşır. */
dialog.job-alert-dialog{width:min(820px,calc(100vw - 32px));max-width:820px;padding:0;border:0;
  position:fixed;inset:0;margin:auto;max-height:calc(100dvh - 32px);
  border-radius:22px;background:var(--card);color:var(--ink);overflow:auto;overscroll-behavior:contain;
  box-shadow:0 30px 90px rgba(16,33,61,.28)}
dialog.job-alert-dialog::backdrop{background:rgba(8,21,47,.58);backdrop-filter:blur(4px)}
.job-alert-dialog[open]{display:grid;grid-template-columns:minmax(250px,.82fr) minmax(0,1.18fr)}
.job-alert-visual{min-height:430px;padding:38px 34px 42px;display:flex;flex-direction:column;
  justify-content:space-between;color:#fff;background:#075dff;position:relative;overflow:hidden}
.job-alert-visual::before,.job-alert-visual::after{content:"";position:absolute;border:1px solid rgba(255,255,255,.17);
  border-radius:50%;width:300px;height:300px;left:-95px;top:-112px}
.job-alert-visual::after{width:190px;height:190px;left:-40px;top:-58px}
.job-alert-logo-seq{display:flex;align-items:center;height:46px;position:relative;z-index:2;
  font-family:var(--display);font-size:38px;font-weight:800;line-height:1;letter-spacing:-.075em;
  white-space:nowrap}
.job-alert-logo-seq .jal-letter,.job-alert-logo-seq em{display:inline-block;opacity:0;
  transform:translateY(9px) scale(.96);font-style:normal}
.job-alert-logo-seq .jal-l{animation:jal-letter-in .36s .88s cubic-bezier(.2,.85,.3,1.25) forwards}
.job-alert-logo-seq .jal-k{animation:jal-letter-in .36s 1.24s cubic-bezier(.2,.85,.3,1.25) forwards}
.job-alert-logo-seq .jal-i{animation:jal-letter-in .36s 1.39s cubic-bezier(.2,.85,.3,1.25) forwards}
.job-alert-logo-seq .jal-n{animation:jal-letter-in .36s 1.54s cubic-bezier(.2,.85,.3,1.25) forwards}
.job-alert-logo-seq .jal-g{animation:jal-letter-in .36s 1.69s cubic-bezier(.2,.85,.3,1.25) forwards}
.job-alert-logo-seq em{font-size:16px;letter-spacing:-.035em;margin:13px 0 0 5px;
  animation:jal-letter-in .36s 1.94s cubic-bezier(.2,.85,.3,1.25) forwards}
.jal-eye{width:.71em;height:.71em;margin:0 .025em;border:3px solid #fff;border-radius:50%;
  position:relative;display:inline-block;opacity:0;transform:scale(.78);overflow:hidden;
  animation:jal-eye-in .38s .18s cubic-bezier(.2,.85,.3,1.25) forwards}
.jal-o2{animation-delay:.31s}
.jal-eye i{position:absolute;width:.19em;height:.19em;border-radius:50%;left:50%;top:50%;
  background:#fff;transform:translate(-50%,-50%);animation:jal-look 1.05s .38s ease-in-out both}
.jal-eye::after{content:"";position:absolute;inset:-2px;background:#075dff;transform:scaleY(0);
  transform-origin:center;animation:jal-blink 1.25s .15s ease-in-out both}
.job-alert-promise{font-family:var(--display);font-size:23px;line-height:1.15;letter-spacing:-.035em;
  max-width:16ch;position:relative;z-index:1}
.job-alert-promise strong{display:block;font-size:28px;letter-spacing:-.05em;margin-top:3px}
@keyframes jal-eye-in{to{opacity:1;transform:scale(1)}}
@keyframes jal-letter-in{to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes jal-look{0%,15%{transform:translate(-95%,-50%)}45%,60%{transform:translate(-50%,-50%)}85%,100%{transform:translate(-5%,-50%)}}
@keyframes jal-blink{0%,28%,39%,100%{transform:scaleY(0)}33%,35%{transform:scaleY(1)}}
.job-alert-radar{width:156px;height:156px;border-radius:50%;position:relative;align-self:center;
  border:1px solid rgba(255,255,255,.3);display:grid;place-items:center;margin-top:30px}
.job-alert-radar::before,.job-alert-radar::after,.job-alert-radar i{content:"";position:absolute;border-radius:50%;
  border:1px solid rgba(255,255,255,.24)}
.job-alert-radar::before{inset:25px}.job-alert-radar::after{inset:52px}
.job-alert-radar i:nth-child(1){width:8px;height:8px;background:#fff;border:0;left:32px;top:49px;
  box-shadow:0 0 0 6px rgba(255,255,255,.13)}
.job-alert-radar i:nth-child(2){width:6px;height:6px;background:#fff;border:0;right:31px;bottom:43px}
.job-alert-radar i:nth-child(3){width:5px;height:5px;background:#fff;border:0;right:45px;top:30px}
.job-alert-radar span{position:absolute;width:76px;height:76px;left:77px;top:77px;
  border-left:1px solid rgba(255,255,255,.7);transform-origin:0 0;transform:rotate(-28deg)}
.job-alert-content{padding:48px 46px 38px;display:flex;flex-direction:column;justify-content:center;position:relative}
.job-alert-close{position:absolute;right:20px;top:18px;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;color:var(--muted);font-size:17px}
.job-alert-close:hover{background:var(--paper-2);color:var(--ink)}
.job-alert-kicker{font-size:13px;font-weight:700;color:var(--navy-2);margin-bottom:14px}
.job-alert-content h2{font-family:var(--display);font-size:38px;line-height:1.04;letter-spacing:-.05em;
  max-width:12ch;color:var(--ink)}
.job-alert-content>p#jobAlertText{font-size:15.5px;line-height:1.65;color:var(--muted);margin-top:18px;max-width:45ch}
.job-alert-actions{display:flex;align-items:center;gap:18px;margin-top:28px}
.job-alert-actions .btn{min-height:48px;padding-inline:24px}
.job-alert-later{font-size:13.5px;font-weight:600;color:var(--muted);text-decoration:underline;
  text-underline-offset:4px}
.job-alert-later:hover{color:var(--ink)}
.job-alert-join{font-size:12.5px;color:var(--muted);margin-top:22px}
.job-alert-join a{color:var(--link);font-weight:700;text-decoration:underline;text-underline-offset:3px}

@media(max-width:680px){
  .job-alert-dialog[open]{display:block}
  .job-alert-visual{min-height:136px;padding:22px 24px;display:block}
  .job-alert-logo-seq{height:35px;font-size:30px}
  .job-alert-logo-seq em{font-size:13px;margin-top:10px}
  .job-alert-radar{display:none}
  .job-alert-promise{position:absolute;left:24px;bottom:20px;font-size:16px;max-width:none}
  .job-alert-promise strong{display:inline;font-size:16px;letter-spacing:-.035em;margin:0}
  .job-alert-content{padding:32px 24px 26px}
  .job-alert-close{top:-120px;right:16px;color:#fff;background:rgba(0,0,0,.12)}
  .job-alert-close:hover{background:rgba(0,0,0,.2);color:#fff}
  .job-alert-content h2{font-size:31px;max-width:14ch}
  .job-alert-actions{align-items:stretch;flex-direction:column;gap:14px}
  .job-alert-actions .btn{width:100%}
}

@media(prefers-reduced-motion:reduce){
  .job-alert-logo-seq .jal-letter,.job-alert-logo-seq em,.jal-eye{opacity:1;transform:none}
  .jal-eye i{transform:translate(-50%,-50%)}
  .jal-eye::after{display:none}
}

/* ---------- akış: yeni parçalar ----------
   Kısayol şeridi, bildirim kartı, başvuru boru hattı ve profil
   bağlantısı. Renkler ve ölçüler akışın geri kalanıyla aynı. */
.fd-quick{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.fd-quick .btn{gap:7px}
.fd-quick .btn svg{width:16px;height:16px}

.fd-card h2{display:flex;align-items:center;gap:10px}
.fd-card-act{margin-left:auto;text-transform:none;letter-spacing:0;font-size:13px;font-weight:600}
.fd-card-act a,.fd-card-act button{color:var(--green-ink);font-weight:600;font-size:13px}
.fd-card-act a:hover,.fd-card-act button:hover{text-decoration:underline}
.fd-count{background:var(--green);color:#fff;border-radius:999px;padding:2px 9px;
  font-size:11px;font-weight:700;letter-spacing:0;text-transform:none}

/* bildirim listesi */
.fd-notes{display:flex;flex-direction:column}
.fd-note{display:flex;gap:12px;padding:13px 0;border-top:1px solid var(--line-soft)}
.fd-note:first-child{border-top:0;padding-top:0}
.fd-note:hover b{text-decoration:underline}
.fd-note-ico{width:32px;height:32px;border-radius:50%;background:var(--paper-2);
  display:grid;place-items:center;flex-shrink:0;color:var(--muted)}
.fd-note.unread .fd-note-ico{background:color-mix(in srgb,var(--green) 16%,var(--card));color:var(--green-ink)}
.fd-note small{display:block;font-size:12px;color:var(--muted)}
.fd-note b{display:block;font-size:14.5px;color:var(--ink);margin-top:2px;line-height:1.3}
.fd-note p{font-size:13px;color:var(--muted);margin:3px 0 0}
.fd-note-pay{display:inline-flex;align-items:center;gap:8px;margin-top:6px;
  font-size:13px;font-weight:600;color:var(--ink-2)}
.fd-note.unread{position:relative}
.fd-note.unread::after{content:"";position:absolute;right:0;top:16px;width:7px;height:7px;
  border-radius:50%;background:var(--green)}

/* bildirim kapalıysa çıkan davet */
.fd-alertsoff{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  border-color:color-mix(in srgb,var(--green) 35%,var(--line))}
.fd-alertsoff b{display:block;font-size:15px;color:var(--ink)}
.fd-alertsoff p{font-size:13.5px;color:var(--muted);margin-top:4px;max-width:52ch}
.fd-alertsoff .btn{margin-left:auto;flex-shrink:0}

/* başvuru boru hattı */
.fd-pipe{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;margin-bottom:14px}
.fd-pipe-i{background:var(--card);padding:10px 6px;text-align:center;transition:background .14s}
.fd-pipe-i:hover{background:var(--paper-2)}
.fd-pipe-i b{display:block;font-size:18px;font-family:var(--display);color:var(--ink)}
.fd-pipe-i small{display:block;font-size:11.5px;color:var(--muted);margin-top:1px}
.fd-pipe-i.hired b{color:var(--green-ink)}
.fd-pipe-i.rejected b{color:var(--muted)}

/* eksik alan listesi */
.fd-missing{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:4px}
.fd-missing li{font-size:12.5px;color:var(--ink-2);padding-left:14px;position:relative}
.fd-missing li::before{content:"";position:absolute;left:2px;top:7px;width:5px;height:5px;
  border-radius:50%;background:var(--amber)}

/* profil bağlantısı */
.fd-share code{display:block;font-size:12px;color:var(--ink-2);background:var(--paper-2);
  border:1px solid var(--line-soft);border-radius:var(--r);padding:9px 11px;
  overflow-wrap:anywhere;margin-bottom:10px}
.fd-share .btn{width:100%}

@media(max-width:700px){
  .fd-pipe{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fd-alertsoff .btn{margin-left:0;width:100%}
}

/* İlan sayfasının altındaki aday havuzu. .detail ızgarasının DIŞINDA
   duruyor — iki sütunlu düzenin sol kolonuna sıkışmasın, kartlar tam
   genişlikte dizilsin. Üstündeki ince çizgi onu ilanın kendisinden
   ayırıyor: burası artık ilan değil, öneri. */
.jobpeople{border-top:1px solid var(--line);margin-top:10px;padding-top:30px;padding-bottom:56px}
.jobpeople .sec-head{margin-bottom:20px}
.jobpeople .sec-head h2{font-size:clamp(19px,2vw,23px)}
@media(max-width:700px){
  .jobpeople{margin-top:4px;padding-top:24px;padding-bottom:40px}
}

/* İlan metninin altındaki tek bilgi paneli. Üç ayrı kutu birleştiği
   için üstündeki boşluk metne bağlanacak kadar daraltıldı: panel
   metnin devamı gibi okunuyor, ayrı bir bölüm gibi değil. */
/* İki sabit satır. Dış kutu satırları, her satır kendi hücrelerini
   diziyor; hücreler flex:1 ile satırı eşit bölüyor. Tek bir auto-fit
   ızgara olsaydı alt satır üst satırın sütunlarına hizalanır ve
   sonda boş kutu kalırdı. .factrow'un kendisi hücre değil, o yüzden
   .factgrid div'den gelen zemin/dolgu/ayraç ondan geri alınıyor. */
.factgrid-tek{display:flex;flex-direction:column;gap:1px;margin:0 0 30px}
.factgrid-tek .factrow{display:flex;gap:1px;background:none;padding:0;box-shadow:none}
.factgrid-tek .factrow > div{flex:1 1 0;min-width:0}
.detail-sec + .factgrid-tek{margin-top:-14px}

/* İlanın aranan özellikleri. .tag sitede on iki yerde kullanılıyor,
   o yüzden global stili bozmadan ilan sayfasına özel bir varyant:
   rozetler mesleğin kendi rengini alıyor, başındaki nokta onları
   düz etiketten ayırıyor. Başlık, bunların ne olduğunu söylüyor —
   çıplak bir çip ne anlama geldiğini anlatmıyordu. */
/* Blok artık ilan metninin ÜSTÜNDE, künyenin hemen altında. Başlığı
   da yok: rozetlerin kendisi ne olduklarını anlatıyor, üstlerine
   konan etiket künye ile metin arasına fazladan bir durak koyuyordu.
   Metni bunlardan ayıran çizgiyi .detail-sec h2 zaten kendisi koyuyor. */
.jobskills{margin:18px 0 4px}
/* Künyenin altındaki ayraç yalnızca ilan sayfasında kalkıyor: burada
   başlığın hemen ardından rozetler geliyor, çizgi araya girip onları
   ayrı bir bölüm gibi gösteriyordu. Çalışan, danışman ve işveren
   sayfalarında künyeden sonra uzun içerik var; orada çizgi duruyor. */
.detail-ilan .detail-hero{padding-bottom:4px;margin-bottom:18px;border-bottom:0}
.jobskills-in{display:flex;flex-wrap:wrap;gap:8px}
.jobskill{display:inline-flex;align-items:center;gap:7px;
  font-size:13px;font-weight:600;line-height:1;
  padding:8px 14px 8px 12px;border-radius:18px;
  color:var(--ink);
  color:color-mix(in srgb, var(--acc) 72%, var(--ink));
  background:var(--paper-2);
  background:color-mix(in srgb, var(--acc) 9%, var(--card));
  border:1px solid var(--line);
  border-color:color-mix(in srgb, var(--acc) 24%, transparent)}
/* Baştaki nokta mesleğin tam rengi — iş kartlarındaki meslek
   noktasıyla aynı işaret. */
.jobskill::before{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--acc);flex-shrink:0}
@media(max-width:700px){
  .jobskills{margin-top:14px}
  /* Telefonda altı sütun okunmuyor: her satır kendi içinde ikişerli
     sarılıyor, hücreler yine eşit genişlikte kalıyor. */
  .factgrid-tek .factrow{flex-wrap:wrap}
  .factgrid-tek .factrow > div{flex:1 1 calc(50% - 1px)}
  .jobskill{font-size:12.5px;padding:7px 12px 7px 10px}
}


/* ============================================================
   PROFİL  (/calisan?id=  ve  /profil)

   İki tasarımın birleşimi:
     • Braintrust'ın kart dili — kapak şeridi, şeride binen yuvarlak
       fotoğraf, uygunluk baloncuğu, yuvarlak bağlantı düğmeleri,
       her bilgi kendi kartında, boş kart kesik çizgili "ekle" kartı.
     • aklar'ın eşleşme kartı — künyenin altında altı hücrelik bilgi
       şeridi, solda kategoriye göre gruplanmış MESLEKLER, sağda
       destek sütunu (güçlü yönler, beceriler, diller, belgeler,
       bağlantılar, kareler).

   İskelet:
     .pf-kapak   mesleğin rengiyle koyulaşan şerit + meslek ikonu
     .pf-kim     fotoğraf, ad, modelin tek satırlık başlığı, eylemler
     .pf-serit   altı temel bilgi, tam genişlikte
     .pf-iki     sol: iş — sağ: işi destekleyen her şey

   Aynı iskelet herkese açık profilde ve kişinin kendi profilinde
   kullanılıyor; tek fark düzenleme kalemleri ve boş kartlar.
   Çizim tarafı için bkz. js/profilkart.js
   ============================================================ */

/* Koyu zeminde ters düğme: kenarlığı ve yazısı beyaz. */
.btn-ters{border:1px solid rgba(255,255,255,.34);color:#fff;background:transparent}
.btn-ters:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.6)}

/* Sayfayı kapak şeridi açıyor — üstünde kırıntı satırı yok. */
.pf{margin:20px 0 34px}
/* Kapak, künye ve bilgi şeridi tek kartın içinde: üçü ayrı kutu
   olunca sayfanın üstü üç parçaya bölünmüş duruyordu. */
.pf-ust{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;margin-bottom:14px}

/* ---------- kapak ---------- */
/* Fotoğrafı olmayan profil asıl hâl: 193 kişiden 177'sinde iş
   fotoğrafı yok. Boş gri bir şerit yerine mesleğin kendi rengi ve
   filigran olarak mesleğin ikonu. */
/* Kapak bir pano değil, ince bir şerit: tek işi mesleğin rengini ve
   ikonunu taşımak. Yüksek tutulunca sayfanın ilk ekranı boş
   görünüyor, asıl bilgi katlamanın altında kalıyordu. */
.pf-kapak{position:relative;height:132px;overflow:hidden;
  background:linear-gradient(118deg,
    color-mix(in srgb,var(--acc) 88%,#0b1a2b) 0%,
    color-mix(in srgb,var(--acc) 44%,#0b1a2b) 58%,
    #0b1a2b 100%)}
/* Mesleğin ikonu yoksa kapak düz bir dikdörtgen kalıyordu; ince bir
   doku her renkte çalışıyor ve şeridi zemin gibi okutuyor. */
.pf-kapak::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(150px 150px at 84% 18%,rgba(255,255,255,.10),transparent 70%),
    repeating-linear-gradient(118deg,rgba(255,255,255,.045) 0 2px,transparent 2px 15px)}
/* İş fotoğrafı varsa kapağı onlar dolduruyor: soldan başlıyor, ilk
   kare en büyük, sayıya göre sütun düzeni değişiyor. */
.pf-kapak.fotolu{display:grid;gap:3px;background:var(--navy);height:186px}
.pf-kapak.f1{grid-template-columns:1fr}
.pf-kapak.f2{grid-template-columns:1fr 1fr}
.pf-kapak.f3{grid-template-columns:1.6fr 1fr 1fr}
.pf-kapak.f4{grid-template-columns:1.8fr 1fr 1fr 1fr}
.pf-kapak.fotolu img{cursor:zoom-in;transition:opacity .14s}
.pf-kapak.fotolu img:hover{opacity:.92}
/* Dosyaların hepsi sunucuda yoksa img'ler kaldırılıyor; kapak o zaman
   fotoğrafsız hâline dönüyor, yüksek boş bir bant kalmıyor. */
.pf-kapak.fotolu:not(:has(img)){display:block;height:132px}
.pf-kapak.fotolu::after{background:linear-gradient(to top,rgba(11,26,43,.3),transparent 62%)}
.pf-kapak.fotolu>img{min-width:0;min-height:0;position:relative;z-index:1}
/* Fotoğraf varken filigran onların arkasında kalıyor; dosya
   yüklenemezse şerit yine boş kalmıyor. */
.pf-kapak.fotolu .pf-filigran,.pf-kapak.fotolu .pf-kapak-yazi{z-index:0}
.pf-kapak img{width:100%;height:100%;object-fit:cover}
/* Filigran kasten çerçeveden taşıyor: ortada asılı durunca yamalı
   görünüyor, kenardan çıkınca zemin deseni gibi okunuyor. */
.pf-filigran{position:absolute;right:-6px;bottom:-34px;width:160px;height:160px;
  color:rgba(255,255,255,.15);pointer-events:none}
.pf-kapak-yazi{position:absolute;right:20px;bottom:6px;max-width:64%;overflow:hidden;
  font-family:var(--display);font-size:40px;font-weight:800;letter-spacing:-.01em;
  text-transform:uppercase;line-height:1;white-space:nowrap;color:rgba(255,255,255,.14);
  pointer-events:none}
.pf-kapak-kalem{position:absolute;right:10px;top:10px;background:rgba(255,255,255,.92)}

/* ---------- künye ---------- */
/* Yalnızca fotoğraf kapağa biniyor; ad, başlık ve eylemler her zaman
   kapağın ALTINDA başlıyor. Satırı ortalayınca uzun künyeli
   profillerde ad koyu kapağın üstüne düşüp okunmaz oluyordu — bu
   yüzden metin sütunları sabit bir üst boşlukla hizalanıyor
   (36px taşma + 4px pay). */
.pf-kim{display:flex;align-items:flex-start;gap:18px;margin-top:-36px;padding:0 22px 16px;
  position:relative;z-index:2}
.pf-kim-ic{padding-top:40px}
/* İletişim kutusu kapağın alt yarısına biniyor: kapağın altına
   bırakılınca künyenin çok altına sarkıyor, satır dengesiz duruyordu.
   Şimdi kapak çizgisini ortalayarak kesiyor — fotoğrafla aynı mantık,
   yalnızca daha derin. */
.pf-eylem{margin-top:-48px}
.pf-avt-sar{position:relative;flex-shrink:0}
.pf-avt{border-radius:50%;overflow:hidden;display:grid;place-items:center;
  border:3px solid var(--card);box-shadow:0 3px 14px rgba(21,21,21,.16);
  font-family:var(--display);font-weight:800;color:#fff;letter-spacing:-.02em}
.pf-avt img{width:100%;height:100%;object-fit:cover}
.pf-avt-kalem{position:absolute;right:0;top:4px;background:var(--card)}
/* Uygunluk baloncuğu fotoğrafın alt kenarına biniyor — işverenin ilk
   aradığı cevap, isimle aynı anda okunuyor. */
.pf-uygun{position:absolute;left:50%;bottom:-10px;transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  font-size:11px;font-weight:700;line-height:1;padding:5px 10px;border-radius:20px;
  border:1px solid var(--line);background:var(--card);color:var(--muted)}
.pf-uygun::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pf-uygun.hemen{color:var(--green-ink);background:var(--green-soft);
  border-color:color-mix(in srgb,var(--green-ink) 32%,transparent)}
.pf-uygun.sonra{color:var(--amber-ink);background:color-mix(in srgb,var(--amber) 12%,var(--card));
  border-color:color-mix(in srgb,var(--amber) 34%,transparent)}

.pf-kim-ic{min-width:0;flex:1}
.pf-kim-ic h1{font-family:var(--display);font-size:28px;font-weight:800;letter-spacing:-.035em;
  color:var(--ink);line-height:1.12;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.pf-onay{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:var(--green-soft);color:var(--green-ink);flex-shrink:0}
/* Modelin tek satırlık başlığı adın hemen altında; puntoyu
   worker.js ayarlıyor (bkz. mansetSigdir). */
.pf-manset{font-size:16px;line-height:1.45;color:var(--ink-2);margin-top:5px;max-width:74ch;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.pf-geri{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;
  color:var(--muted);margin-bottom:4px}
.pf-geri:hover{color:var(--ink)}
.pf-geri svg{width:13px;height:13px}
/* Künye bilgileri ve bağlantı düğmeleri tek satırda: ayrı satırlara
   bölününce üst blok iki kat uzuyordu. */
.pf-satir{display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap;margin-top:8px}
.pf-meta{display:flex;gap:5px 16px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.pf-meta span{display:inline-flex;align-items:center;gap:5px;min-width:0}
.pf-meta svg{flex-shrink:0}
.pf-meta span:last-child svg{color:var(--amber)}
/* Bağlantılar künyede yuvarlak düğme olarak: "bu kişi nereden
   bulunur" adın parçası. Tam liste sağ sütundaki kartta. */
.pf-sos{display:flex;gap:6px;flex-wrap:wrap}
.pf-sos a,.pf-sos button{width:28px;height:28px;border-radius:50%;display:grid;
  place-items:center;border:1px solid var(--line);background:var(--card);color:var(--ink-2);
  transition:color .14s,border-color .14s,background .14s}
.pf-sos a:hover,.pf-sos button:hover{border-color:var(--ink);color:var(--ink)}
/* İletişim kutusu: mesaj, CV ve uyarı notu tek bir dik kutuda alt
   alta. Yan yana dizilince düğmeler künyeye yapışıyor, notun yeri
   belirsiz kalıyordu. Sıralama DOM'a değil `order`a bağlı — kutuyu
   dolduran taraf (herkese açık profil / kendi profilim) değişiyor. */
.pf-eylem{flex-shrink:0;align-self:flex-start;display:flex;flex-direction:column;
  align-items:stretch;gap:9px;width:264px;padding:14px;border:1px solid var(--line);
  border-radius:var(--r-lg);background:var(--paper)}
.pf-eylem .channels{order:1;display:flex;flex-direction:column;gap:9px}
.pf-eylem .btn{order:2}
.pf-eylem .chan-note{order:4;margin:0;text-align:center;
  font-size:11.5px;line-height:1.45;color:var(--muted)}
.pf-eylem .chan,.pf-eylem .btn{width:100%;height:40px;padding:0 14px;justify-content:center;
  white-space:nowrap}
/* Kilitli iletişim: maskeli e-posta ve telefon, yanlarında kilit
   işareti. Düğme değil — tıklanacak bir şey yok. */
.pf-iletisim{order:3;display:grid;gap:6px;padding-top:11px;
  border-top:1px solid var(--line)}
.pf-iletisim-sat{display:flex;align-items:center;gap:8px;min-width:0;font-size:12.5px;
  color:var(--muted)}
.pf-iletisim-sat svg:first-child{flex-shrink:0;color:var(--muted)}
.pf-iletisim-sat b{flex:1;min-width:0;font-family:var(--display);font-weight:700;
  font-size:13px;letter-spacing:.01em;color:var(--ink-2);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.pf-iletisim-sat svg:last-child{flex-shrink:0;color:var(--muted);opacity:.7}

/* ---------- bilgi şeridi ---------- */
/* Şerit kartın alt bölümü: kendi kenarlığı yok, üstten tek çizgiyle
   künyeden ayrılıyor. */
.pf-serit{display:grid;grid-template-columns:repeat(auto-fit,minmax(152px,1fr));gap:1px;
  background:var(--line-soft);border-top:1px solid var(--line)}
.pf-serit>div{background:var(--card);padding:12px 16px;min-width:0}
.pf-serit small{display:block;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin-bottom:5px;font-weight:700}
.pf-serit b{display:block;font-family:var(--display);font-size:15.5px;font-weight:800;
  letter-spacing:-.02em;color:var(--ink);line-height:1.3;overflow-wrap:anywhere}
/* Yeşil olanlar işverenin duymak istediği cevaplar: hemen başlar,
   uzaktan çalışır, hızlı döner. */
.pf-serit .ok b{color:var(--green-ink)}

/* ---------- iki sütun ---------- */
/* Solda kişinin İŞİ, sağda o işi destekleyen her şey. */
.pf-iki{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:14px;align-items:start}
.pf-iki.tek{grid-template-columns:minmax(0,1fr)}
.pf-ana,.pf-yan{display:grid;gap:14px;min-width:0;align-content:start}

/* ---------- kart ---------- */
.pf-kart{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:18px 20px;min-width:0}
.pf-kart-bas{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-bottom:12px}
.pf-kart-bas h3{font-family:var(--display);font-size:11px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted);font-weight:700}
/* Özet kartı mesleğin rengini alıyor: sol sütunun ilk okunan kutusu. */
.pf-kart.tint{background:color-mix(in srgb,var(--acc) 6%,var(--card));
  border-color:color-mix(in srgb,var(--acc) 20%,transparent)}
/* Boş kart yalnızca kişinin kendi profilinde: bölüm kaybolmuyor,
   davete dönüşüyor. */
.pf-kart.bos{border-style:dashed;background:transparent}
.pf-bos-not{font-size:13px;line-height:1.55;color:var(--muted);font-style:italic;
  margin-bottom:12px;max-width:52ch}
.pf-ekle{height:36px;padding:0 16px;font-size:13px}
.pf-kalem{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;color:var(--muted);background:var(--card);flex-shrink:0}
.pf-kalem:hover{color:var(--ink);border-color:var(--ink)}
.pf-yan .pf-kart{padding:16px 18px}

/* ---------- özet ---------- */
.pf-ozet{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow:hidden}
.pf-ozet.acik{display:block;-webkit-line-clamp:none}
.pf-ozet p{font-size:14.5px;line-height:1.74;color:var(--ink-2);max-width:68ch}
.pf-ozet p+p{margin-top:11px}
.pf-daha{margin-top:10px;font-size:13px;font-weight:700;color:var(--ink);
  text-decoration:underline;text-underline-offset:3px}
.pf-daha:hover{color:var(--acc)}
.pf-yer{font-size:13px;color:var(--muted);margin-top:13px}
.pf-yer b{color:var(--ink-2);font-weight:600}

/* ---------- çipler ---------- */
.pf-cipler{display:flex;gap:7px;flex-wrap:wrap}
.pf-cip{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;
  line-height:1.2;padding:7px 12px;border-radius:20px;color:var(--ink-2);
  background:var(--paper-2);border:1px solid transparent;overflow-wrap:anywhere}
/* Modelin çıkardığı güçlü yönler — Braintrust'taki "top skills". */
.pf-cip.one{color:var(--green-ink);background:var(--green-soft);
  border-color:color-mix(in srgb,var(--green-ink) 26%,transparent)}
.pf-cip.one::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;
  flex-shrink:0}

/* ---------- kategori metni + meslek satırları ---------- */
/* İş kategorisi başlığının hemen altında o kategori hakkında tek bir
   anlatım, onun altında kategorideki meslekler liste hâlinde. Metin
   meslek başına değil kategori başına yazılıyor
   (bkz. server.js -> kategoriler[].metin): 153 meslek kaydının
   %56'sında mesleğin adından başka veri yok, meslek başına metin
   istemek boş panele ya da aynı paragrafın tekrarına çıkıyordu. */
.pf-kat-metin{margin-bottom:14px}
/* O kategoride yüklenmiş iş fotoğrafları, meslek listesinin altında. */
.pf-kat-kareler{margin-top:16px;padding-top:15px;border-top:1px solid var(--line-soft)}
.pf-kat-metin p{font-size:14px;line-height:1.75;color:var(--ink-2);max-width:68ch}
.pf-kat-metin p+p{margin-top:11px}
/* Meslekler LinkedIn'in deneyim listesi gibi alt alta; ince çizgiyle
   ayrılıyor. Sütunlara bölününce hangi mesleğin hangi satırda olduğu
   kayboluyordu. */
.pf-ms-liste{display:grid;gap:0}
/* Nokta ve ücret mesleğin ADIYLA hizalı: satırın altındaki cümle iki
   satıra çıkınca ortalama hizası ikisini de aşağı kaydırıyordu. */
.pf-ms{display:flex;align-items:flex-start;gap:11px;padding:11px 2px;min-width:0;
  border-top:1px solid var(--line-soft)}
.pf-ms:first-child{border-top:0}
.pf-ms-nok{width:7px;height:7px;border-radius:50%;background:var(--acc);flex-shrink:0;margin-top:6px}
.pf-ms-ad{flex:1;min-width:0}
.pf-ms-ad b{display:block;font-size:14px;font-weight:700;line-height:1.3;color:var(--ink)}
.pf-ms-ad small{display:block;font-size:12.5px;line-height:1.5;color:var(--muted);margin-top:2px}
.pf-ms em{font-style:normal;font-family:var(--display);font-size:13px;font-weight:800;
  letter-spacing:-.02em;color:var(--ink);flex-shrink:0}


/* ---------- eğitim ---------- */
/* Üniversite manşet, bölüm altında, seviye ve sınıf küçük çiplerde.
   Sitenin öne çıkarmak istediği bilgi okulun adı — o yüzden künye
   yazı tipiyle ve büyük. Lise/ilköğretim hiç çizilmiyor
   (bkz. js/profilkart.js -> egitimKarti). */
.pf-egitim{display:flex;gap:12px;align-items:flex-start;min-width:0}
.pf-egitim-ik{width:36px;height:36px;border-radius:var(--r);display:grid;place-items:center;
  flex-shrink:0;color:var(--acc);background:color-mix(in srgb,var(--acc) 10%,var(--card));
  border:1px solid color-mix(in srgb,var(--acc) 18%,transparent)}
.pf-egitim>div{min-width:0;flex:1}
.pf-egitim b{display:block;font-family:var(--display);font-size:15px;font-weight:800;
  letter-spacing:-.02em;line-height:1.3;color:var(--ink);overflow-wrap:anywhere}
.pf-egitim small{display:block;font-size:12.5px;line-height:1.45;color:var(--ink-2);
  margin-top:3px;overflow-wrap:anywhere}
.pf-egitim .pf-cipler{margin-top:9px}
.pf-egitim .pf-cip{font-size:11.5px;padding:5px 10px}
.pf-hobi-not{font-size:12.5px;line-height:1.6;color:var(--muted);margin-top:10px;
  padding-top:10px;border-top:1px solid var(--line-soft)}

/* ---------- paylaş ---------- */
/* Künye satırındaki yuvarlak ikonlarla aynı ölçüde; kopyalanınca
   kısa süre yeşile dönüyor. */
.pf-sos [data-paylas].ok{color:var(--green-ink);background:var(--green-soft);
  border-color:color-mix(in srgb,var(--green-ink) 40%,transparent)}

/* ---------- belgeler ---------- */
.pf-belgeler{display:grid;gap:8px}
.pf-belge{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:var(--r);
  min-width:0;color:var(--amber-ink);background:color-mix(in srgb,var(--amber) 9%,var(--card));
  border:1px solid color-mix(in srgb,var(--amber) 26%,transparent)}
.pf-belge i{flex-shrink:0;display:grid;place-items:center}
.pf-belge>span{min-width:0}
.pf-belge b{display:block;font-size:13px;font-weight:700;line-height:1.3;color:var(--ink);
  overflow-wrap:anywhere}
.pf-belge small{display:block;font-size:11px;color:var(--muted);margin-top:1px}

/* ---------- iş kareleri ---------- */
.pf-kareler{display:grid;grid-template-columns:repeat(auto-fill,minmax(124px,1fr));gap:8px}
.pf-kare{position:relative;border-radius:var(--r);overflow:hidden;background:var(--paper-2)}
.pf-kareler img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;cursor:zoom-in;
  transition:transform .18s}
.pf-kare:hover img{transform:scale(1.04)}
/* Kişinin kendi yazdığı not karonun altına biniyor — Higgsfield'ın
   galeri etiketleri gibi. */
.pf-kare figcaption{position:absolute;left:0;right:0;bottom:0;padding:14px 8px 6px;
  font-size:10.5px;font-weight:600;line-height:1.3;color:#fff;pointer-events:none;
  background:linear-gradient(to top,rgba(10,16,24,.82),transparent);
  overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
/* Dokuzdan fazlası varsa sonuncunun üstünde kalanın sayısı. */
.pf-kare[data-fazla]::after{content:attr(data-fazla);position:absolute;inset:0;
  display:grid;place-items:center;font-family:var(--display);font-size:19px;font-weight:800;
  color:#fff;background:rgba(10,16,24,.58);pointer-events:none}
/* Dosya sunucuda yoksa img kaldırılıyor (bkz. ui.js data-fb="remove").
   Tek tek düşen karo yalnızca not şeridiyle boş bir kutu olarak
   kalıyordu; karonun tamamı gizleniyor. */
.pf-kare:not(:has(img)){display:none}
/* Hiçbiri yüklenmediyse galeri bölümü de gizleniyor. Seçici DOĞRUDAN
   ÇOCUK üzerinden: kareler kategori kartının içine de girdiği için
   gevşek seçici tüm meslek bölümünü gizliyordu. */
.pf-kart:has(> .pf-kareler):not(:has(.pf-kareler img)){display:none}
.pf-kat-kareler:not(:has(img)){display:none}

/* Yorumlar kendi kartında: modül kendi başlığını çiziyor, kartın
   alt boşluğunu sıfırlıyoruz. */
.pf-kart>.detail-sec{margin-bottom:0}
.pf-kart>.detail-sec h2{padding-top:0;border-top:0;margin-bottom:12px}

/* ---------- /profil: kendi profilim ---------- */
/* Kart görünümü herkese açık profille aynı genişlikte duruyor;
   düzenleme sayfası ise form ölçüsünde, tek sütun. */
.setup.at-card .setup-body{max-width:1240px;padding-top:26px}
.setup.at-card .pmode{margin-bottom:18px}
.odak{max-width:820px;margin:0 auto}
.odak .pf-geri{margin-bottom:14px}
.odak .setup-head{margin-bottom:22px}
.odak .setup-head h1{font-size:clamp(23px,3vw,31px)}
.odak .fx-main{display:grid;gap:0}

/* ---------- fotoğraf büyütme ---------- */
.pf-isik{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;
  gap:10px;padding:24px;background:rgba(10,16,24,.93);backdrop-filter:blur(3px)}
.pf-isik-cerceve{max-width:min(1100px,92vw);max-height:86vh;display:flex;flex-direction:column;
  align-items:center;gap:12px}
.pf-isik-cerceve img{max-width:100%;max-height:78vh;object-fit:contain;border-radius:var(--r-lg);
  background:#0a1018}
.pf-isik-cerceve figcaption{font-size:13.5px;color:rgba(255,255,255,.82);text-align:center;
  max-width:70ch;line-height:1.5}
.pf-isik-dugme{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);
  flex-shrink:0}
.pf-isik-dugme:hover{background:rgba(255,255,255,.22)}
.pf-isik-dugme.kapat{position:absolute;right:20px;top:20px}
.pf-isik-sayac{position:absolute;left:0;right:0;bottom:22px;text-align:center;font-size:12.5px;
  font-weight:700;letter-spacing:.06em;color:rgba(255,255,255,.7)}

/* benzer profiller */
.pf-benzer{padding-top:0}
.pf-benzer .sec-head{margin-bottom:18px}

@media(max-width:1060px){
  .pf-iki{grid-template-columns:1fr}
  /* Tek sütuna düşünce destek kartları yan yana diziliyor. */
  .pf-yan{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
}
@media(max-width:860px){
  .pf-eylem{max-width:none}
}
@media(max-width:700px){
  .pf-kapak{height:96px}
  .pf-kapak.fotolu{height:150px}
  /* Dar ekranda dört kare okunmuyor; ilk ikisi kalıyor. */
  .pf-kapak.f3,.pf-kapak.f4{grid-template-columns:1.4fr 1fr}
  .pf-kapak img.k2,.pf-kapak img.k3{display:none}
  .pf-filigran{width:112px;height:112px;right:-10px;bottom:-26px}
  .pf-kapak-yazi{font-size:24px;right:14px;bottom:5px}
  .pf-kim{padding-left:16px;padding-right:16px}
  .pf-isik{padding:14px}
  .pf-isik-dugme.kapat{right:12px;top:12px}
  .pf-kim{flex-direction:column;align-items:flex-start;gap:16px;margin-top:-34px;
    padding-bottom:4px}
  .pf-kim-ic{padding-top:0}
  .pf-eylem{margin-top:0}
  /* Baloncuk dar ekranda ortalanınca sayfanın sol boşluğunu aşıyor;
     fotoğrafın sol kenarına hizalanıyor. */
  .pf-uygun{left:0;transform:none}
  .pf-manset{-webkit-line-clamp:3;font-size:15px}
  .pf-avt{width:76px!important;height:76px!important;font-size:26px!important}
  .pf-kim-ic{width:100%}
  .pf-kim-ic h1{font-size:24px}
  .pf-eylem{width:100%}
  .pf-kart,.pf-yan .pf-kart{padding:16px}
  .pf-serit{grid-template-columns:repeat(2,1fr)}
  .pf-serit>div{padding:12px 14px}
  /* Tek sayıda hücre kalırsa sonuncusu iki sütuna yayılıyor; yoksa
     yanında boş gri bir kutu kalıyor. */
  .pf-serit>div:last-child:nth-child(odd){grid-column:span 2}
  .pf-yan{grid-template-columns:1fr}
  .pf-kareler{grid-template-columns:repeat(3,1fr)}
}

/* ============================================================
   PROFİL — v2 düzen
   Çizim tarafı: js/profilkart.js → profil()
   Ölçüler tasarimlar/profil-detay-a-revize.html ile birebir.

   Eski düzenin kapak şeridi, künye bindirmesi ve gri bilgi şeridi
   burada yok. Sayfa tek bir okuma sırası: künye → hakkında →
   kategori sekmeleri → seçili kategori. Yukarıdaki .pf-kapak /
   .pf-kim / .pf-serit kuralları duruyor, onları meslek vitrini
   (PKART.vitrin) kullanıyor.

   Tasarımın çizgisi ve ikincil metni sitenin genel tonundan bir
   tık açık; ikisi de yalnızca bu sayfada geçerli olsun diye
   .pf-v2 üzerinde tanımlanıyor.
   ============================================================ */
.profile-detail-page .hdr-profile{position:relative;background:var(--paper);border:0;box-shadow:none;padding:28px 0 12px}
.profile-detail-page .hdr-profile .hdr-main{height:56px;padding:0 24px;border-radius:10px;background:var(--card);gap:0}
.profile-detail-page .hdr-profile .brand img{height:25px}
.profile-detail-page .pf-head-nav{display:flex;align-items:center;gap:30px;margin-left:48px;
  font-size:14px;font-weight:700;color:var(--ink)}
.profile-detail-page .pf-head-search{display:flex;align-items:center;opacity:1;transform:none;
  pointer-events:auto;width:min(454px,38vw);margin-left:auto;margin-right:auto;background:#f4f6fa;
  border:1px solid var(--line-soft);border-radius:999px;overflow:hidden}
.profile-detail-page .pf-head-search button{order:-1;width:44px;height:40px;color:var(--ink-2);
  background:transparent;border-radius:0}
.profile-detail-page .pf-head-search input{height:40px;padding:0 14px 0 0;border:0;background:transparent;font-size:13px}
.profile-detail-page .pf-head-actions{display:flex;align-items:center;gap:20px}
.profile-detail-page .pf-bell{display:grid;place-items:center;color:var(--ink)}
.profile-detail-page .hdr-profile .usertrigger b{display:none}
.profile-detail-page .hdr-profile .usertrigger .avt{width:36px;height:36px}
.profile-detail-page .hdr-profile .burger{display:none}
.profile-detail-page>main.wrap{padding-top:0}
.profile-detail-page footer{display:none}
.profile-detail-page .pf{margin:0 0 34px}

.pf-v2{--pf-line:#e4e8ef;--pf-soft:#53617a;--pf-yuzey:#f1f4f8;--pf-r:13px}
.pf-v2 .pf-iki{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(310px,.92fr);
  gap:18px;align-items:start}
.pf-v2 .pf-ana,.pf-v2 .pf-yan{display:grid;gap:16px;min-width:0;align-content:start}
.pf-v2 .pf-kart{border-radius:var(--pf-r);border-color:var(--pf-line);padding:20px 22px;
  box-shadow:0 2px 0 rgba(16,33,61,.01)}
.pf-v2 .pf-yan .pf-kart{padding:20px}
.pf-v2 .pf-kart-bas{margin-bottom:4px}
.pf-v2 .pf-kart-bas h3{font-family:var(--display);font-size:20px;font-weight:800;
  letter-spacing:-.025em;text-transform:none;color:var(--ink)}

/* ---------- künye ---------- */
.pf-v2 .pf-kunye{display:grid;grid-template-columns:120px minmax(0,1fr);gap:22px;
  align-items:center;padding:22px;position:relative}
.pf-kunye-foto{position:relative}
.pf-kunye .pf-avt{border:1px solid var(--pf-line);box-shadow:none}
.pf-kunye-ic{min-width:0}
.pf-kunye-ic h1{font-family:var(--display);font-size:30px;font-weight:800;letter-spacing:-.04em;
  color:var(--ink);line-height:1.05;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.pf-kunye-sat{display:flex;flex-wrap:wrap;gap:9px 16px;align-items:center;margin-top:7px;
  color:var(--pf-soft);font-size:14px}
.pf-sehir{display:inline-flex;align-items:center;gap:6px}
.pf-sehir svg{flex-shrink:0}
/* Uygunluk rozeti künyede, adın hemen altında: işverenin ilk aradığı
   cevap isimle aynı anda okunuyor. */
.pf-uygun2{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:99px;
  font-size:13px;font-weight:750;line-height:1;color:var(--green);background:var(--green-soft)}
.pf-uygun2::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.pf-uygun2.sonra{color:var(--amber-ink);background:color-mix(in srgb,var(--amber) 13%,var(--card))}
/* Künyede üniversite: şehirle aynı satırda, aynı biçimde. Yeşil
   baloncuk yapılmadı -- o biçim "şu an müsait" demek, üniversite ise
   bir durum değil bir bilgi. */
.pf-okul{display:inline-flex;align-items:center;gap:6px;min-width:0}
.pf-okul svg{flex-shrink:0;opacity:.8}

.pf-v2 .pf-manset{max-width:690px;margin-top:10px;color:var(--pf-soft);font-size:16px;
  line-height:1.5;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden}
/* Paylaş düğmesi kartın sağ üst köşesinde: tasarımda orası boş, tek
   bir yuvarlak ikon düzeni bozmuyor ama işlevi de kaybetmiyoruz. */
.pf-paylas{position:absolute;right:18px;top:18px;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;border:1px solid var(--pf-line);background:var(--card);
  color:var(--muted);transition:color .14s,border-color .14s}
.pf-paylas:hover{color:var(--ink);border-color:var(--ink)}
.pf-paylas.ok{color:var(--green-ink);background:var(--green-soft);border-color:var(--green-ink)}

/* ---------- kategori rozetleri ---------- */
/* Künyenin altındaki özet rozetler. Sekmelerle aynı data-kat değerini
   taşıyorlar: hangisine basılırsa basılsın aynı kategori seçiliyor. */
.pf-kat-rozetler{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.pf-kat-rozet{display:inline-flex;align-items:center;gap:8px;padding:7px 11px;border-radius:9px;
  font-size:13px;font-weight:760;line-height:1.25;cursor:pointer;text-align:left;border:0;
  color:color-mix(in srgb,var(--kat) 72%,var(--ink));
  background:color-mix(in srgb,var(--kat) 8%,var(--card));
  transition:background .15s,color .15s}
.pf-kat-rozet svg{flex-shrink:0;opacity:.85}
.pf-kat-rozet small{font-weight:700;opacity:.72}
.pf-kat-rozet:hover{background:color-mix(in srgb,var(--kat) 15%,var(--card))}
.pf-kat-rozet.secili{background:var(--kat);color:#fff}
.pf-kat-rozet.secili small{opacity:.8}

/* ---------- kategori sekmeleri ---------- */
/* Tek kategorili profilde hiç çizilmiyor (bkz. profilkart → v2Sekmeler). */
/* Sekmeler tek parça bir çubuk: aralarında boşluk yok, dış köşeler
   kırpılıyor. Ayırıcı çizgi kenarlıkla değil box-shadow ile, çünkü
   üçten fazla kategoride satır kaydığında kenarlık iki kat kalınlaşıp
   ızgarayı bozuyor. */
.pf-sekmeler{display:flex;flex-wrap:wrap;
  overflow:hidden;border-radius:14px;border:1px solid var(--pf-line);background:var(--card)}
/* flex, ızgara değil: dörtten fazla kategoride son satıra tek sekme
   düşünce ızgara yanında beyaz bir boşluk bırakıyordu. Flex'te son
   satırdaki sekmeler büyüyüp çubuğu dolduruyor. */
.pf-sek{flex:1 1 252px;min-width:0;
  min-height:76px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;
  align-items:center;padding:12px 18px;border:0;cursor:pointer;text-align:left;
  color:color-mix(in srgb,var(--kat) 70%,var(--ink));
  background:color-mix(in srgb,var(--kat) 7%,var(--card));
  box-shadow:1px 0 0 var(--pf-line),0 1px 0 var(--pf-line);
  transition:background .15s,color .15s}
.pf-sek:hover{background:color-mix(in srgb,var(--kat) 13%,var(--card))}
.pf-sek.secili{color:#fff;background:var(--kat)}
.pf-sek-ik{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--kat) 13%,var(--card));color:var(--kat)}
.pf-sek.secili .pf-sek-ik{background:rgba(255,255,255,.15);color:#fff}
.pf-sek-ic{min-width:0}
.pf-sek-ad{display:block;font-size:15px;font-weight:850;letter-spacing:-.015em;
  overflow:hidden;text-overflow:ellipsis}
.pf-sek-ad small{font-weight:700;opacity:.78}
.pf-sek em{display:block;margin-top:4px;font-style:normal;font-size:13px;font-weight:700;
  opacity:.84}

/* ---------- hakkında ---------- */
.pf-v2 .pf-ozet{-webkit-line-clamp:3}
.pf-v2 .pf-ozet p{font-size:15px;line-height:1.55;color:var(--pf-soft);max-width:94ch}
/* Tasarımda metin düğmesi yeşil ve altı çizgisiz; koyu+altı çizili
   hâli bağlantı değil başlık gibi okunuyordu. */
.pf-v2 .pf-daha{display:inline-flex;align-items:center;gap:6px;margin-top:8px;
  color:var(--green);font-weight:800;text-decoration:none}
.pf-v2 .pf-daha::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);
  transition:transform .15s}
.pf-v2 .pf-ozet.acik + .pf-daha::after{transform:translateY(1px) rotate(-135deg)}
.pf-v2 .pf-daha:hover{text-decoration:underline;text-underline-offset:3px}

/* ---------- kategori paneli ---------- */
.pf-kat-panel.gizli{display:none}
.pf-v2 button:focus-visible,.pf-v2 a:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.pf-v2 .pf-kunye-ic h1{padding-right:28px}
.pf-v2 .pf-il-ic b{white-space:normal;overflow-wrap:anywhere}
.pf-v2 .pf-ms2-ad,.pf-v2 .pf-ms2-not{min-width:0;overflow-wrap:anywhere}
@media(min-width:1061px) and (max-width:1350px){
  .pf-v2 .pf-kat-bas{grid-template-columns:auto minmax(0,1fr)}
  .pf-v2 .pf-ucret{grid-column:1 / -1;min-width:0}
  .pf-v2 .pf-ms2{grid-template-columns:44px minmax(150px,.8fr) minmax(0,1fr);gap:10px}
}
.pf-kat-bas{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
  gap:14px}
.pf-kat-ik{width:54px;height:54px;border-radius:14px;display:grid;place-items:center;
  color:var(--kat);background:color-mix(in srgb,var(--kat) 9%,var(--card))}
.pf-kat-yazi{min-width:0}
.pf-kat-yazi h2{font-family:var(--display);font-size:29px;font-weight:800;letter-spacing:-.035em;
  line-height:1.1;color:var(--kat)}
.pf-kat-yazi p{margin-top:4px;font-size:16px;line-height:1.45;color:var(--pf-soft);max-width:62ch}
/* Ücret kutusu: kategorinin kendi renginde, başlığın karşısında.
   Rakam kişinin kayıtta seçtiği BANT (bkz. profilkart → katUcret). */
.pf-ucret{min-width:218px;padding:12px 14px;border-radius:12px;color:var(--kat);
  background:color-mix(in srgb,var(--kat) 9%,var(--card))}
.pf-ucret small{display:block;font-size:12px;font-weight:800;line-height:1.35}
.pf-ucret b{display:inline-block;margin:3px 0;font-family:var(--display);font-size:21px;
  font-weight:900;letter-spacing:-.035em;line-height:1.2}
.pf-ucret>span{font-size:14px;font-weight:800}
.pf-ucret-not{color:var(--muted);font-weight:600}

/* Bölüm içi ara başlık: "Bu kategorideki mesleklerim". */
.pf-alt-bas{margin:22px 0 5px;font-size:16px;font-weight:850;color:var(--ink)}

/* ---------- meslek satırları (v2) ---------- */
/* Solda ad ve deneyim, sağda cümle ve beceriler. Beceriler ayrı bir
   kutuda değil: hangi becerinin hangi mesleğe ait olduğu ancak burada
   belli oluyor. */
.pf-ms2-liste{display:grid}
.pf-ms2{display:grid;grid-template-columns:52px 245px minmax(0,1fr);gap:14px;align-items:center;
  padding:16px 4px;border-top:1px solid var(--pf-line)}
.pf-ms2-ik{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  color:var(--kat);background:color-mix(in srgb,var(--kat) 9%,var(--card))}
.pf-ms2-ad b{display:block;margin-bottom:4px;font-size:16px;font-weight:700;line-height:1.25;
  color:var(--ink)}
.pf-ms2-ad small{display:block;font-size:13px;color:var(--muted)}
.pf-ms2-not p{margin-bottom:7px;font-size:14px;line-height:1.4;color:var(--pf-soft)}
.pf-ms2-not .pf-cipler{gap:6px}
.pf-cip.ufak{padding:5px 9px;border-radius:7px;background:var(--pf-yuzey);color:#34445e;
  font-size:12px;font-weight:600}

/* ---------- çalışmalar ---------- */
/* Not fotoğrafın ÜSTÜNE binmiyor, altında kendi satırında: üstüne
   binince uzun notlar okunmuyordu. */
.pf-isler-blok{margin-top:6px}
.pf-isler-blok .pf-alt-bas{margin:18px 0 10px;font-size:18px;font-weight:800;
  font-family:var(--display);letter-spacing:-.025em}
.pf-isler{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.pf-is{min-width:0}
.pf-is img{width:100%;height:156px;object-fit:cover;display:block;cursor:zoom-in;
  border-radius:13px;background:var(--paper-2);transition:opacity .15s}
.pf-is img:hover{opacity:.93}
.pf-is figcaption{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:8px 0 2px;font-size:14px;font-weight:800;color:var(--ink);min-width:0}
.pf-is figcaption span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-is figcaption svg{flex-shrink:0;color:var(--muted)}
/* Dosya sunucuda yoksa img kaldırılıyor (bkz. ui.js data-fb="remove");
   geriye yalnız not satırı kalmasın diye karo tamamen gizleniyor. */
.pf-is:not(:has(img)){display:none}
.pf-isler-blok:not(:has(img)){display:none}

/* ---------- yan sütun: iletişim ---------- */
.pf-v2 .pf-mesaj,.pf-v2 .pf-cv{width:100%;min-height:48px;border-radius:10px;font-weight:850;
  font-size:14.5px}
.pf-v2 .pf-cv{margin-top:12px;border-color:#9ba6b7}
.pf-il-liste{margin-top:6px}
.pf-il-sat{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:11px;align-items:center;
  padding:14px 0;border-bottom:1px solid var(--pf-line)}
.pf-il-sat:last-child{border-bottom:0}
.pf-il-ik{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  color:var(--ink);background:#f2f5f9}
.pf-il-ic{min-width:0}
.pf-il-et{display:block;margin-bottom:3px;font-weight:800;font-size:13px;color:var(--ink)}
.pf-il-dg{display:block;font-size:13px;color:var(--pf-soft);word-break:break-word}
/* Eylem bağlantısı yeşil: satırdaki tek tıklanabilir şey o. Kilitli
   satırda eylem yerine kilit işareti duruyor (bkz. v2IletisimKarti). */
.pf-il-eylem{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:850;
  color:var(--green);text-decoration:none}
.pf-il-eylem:hover{text-decoration:underline;text-underline-offset:3px}
.pf-il-sat>svg:last-child{color:var(--muted);opacity:.7}
.pf-il-ekstra{display:grid;gap:10px;margin-top:12px}
.pf-il-ekstra .btn{width:100%;min-height:44px;border-radius:10px;font-size:14px}
.pf-izin{display:flex;align-items:flex-start;gap:8px;margin:13px 0 0;font-size:12px;
  line-height:1.4;color:var(--muted)}
.pf-izin svg{flex-shrink:0;margin-top:1px}

/* ---------- yan sütun: çalışma tercihleri ---------- */
.pf-terc{margin-top:6px}
.pf-terc-sat{display:grid;grid-template-columns:42px minmax(0,1fr);gap:11px;align-items:center;
  padding:14px 0;border-bottom:1px solid var(--pf-line)}
.pf-terc-sat:last-child{border-bottom:0;padding-bottom:0}

/* ---------- yan sütun: yükseköğrenim satırı ---------- */
/* Diller kartının içinde, çiplerin altında. İletişim ve tercih
   satırlarıyla aynı iskelet: 38px ikon kutusu, üstte koyu etiket,
   altında yumuşak gri değer. */
.pf-egitim-sat{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:11px;
  align-items:center;margin-top:14px;padding-top:14px;border-top:1px solid var(--pf-line)}
/* Çip yoksa (dil girilmemişse) üstteki çizgi havada kalıyor. */
.pf-v2 .pf-kart > .pf-egitim-sat:first-child{margin-top:0;padding-top:0;border-top:0}

/* ---------- yan sütun: çipler ---------- */
.pf-v2 .pf-yan .pf-cip{padding:7px 11px;border-radius:9px;background:var(--pf-yuzey);
  color:var(--pf-soft);font-size:13px;border:0}
.pf-v2 .pf-yan .pf-cip.one{color:var(--green-ink);background:var(--green-soft)}

@media(max-width:1060px){
  .profile-detail-page .hdr-profile{padding-top:12px}
  .profile-detail-page .pf-head-nav{display:none}
  .profile-detail-page .pf-head-search{width:auto;margin-left:24px;margin-right:20px;flex:1}
  .profile-detail-page .hdr-profile .burger{display:block}
  .pf-v2 .pf-iki{grid-template-columns:1fr}
  .pf-v2 .pf-yan{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
}
@media(max-width:860px){
  /* Ücret kutusu başlığın yanında kalmıyor: ikisi de daralıp
     okunmuyordu. Kutu tam genişlikte alta iniyor. */
  .pf-kat-bas{grid-template-columns:auto minmax(0,1fr)}
  .pf-ucret{grid-column:1 / -1;min-width:0}
  /* Meslek satırı iki sütuna düşüyor: ad üstte, anlatım altında. */
  .pf-ms2{grid-template-columns:45px minmax(0,1fr);align-items:start}
  .pf-ms2-not{grid-column:2}
}
@media(max-width:700px){
  .profile-detail-page .hdr-profile .hdr-main{height:54px;padding:0 14px}
  .profile-detail-page .pf-head-search{margin-left:14px;margin-right:8px}
  .profile-detail-page .pf-head-search input{font-size:14px}
  .profile-detail-page .pf-bell{display:none}
  .pf-v2 .pf-kart{padding:16px}
  .pf-v2 .pf-yan .pf-kart{padding:16px}
  .pf-v2 .pf-kunye{grid-template-columns:76px minmax(0,1fr);gap:14px;padding:16px}
  .pf-kunye .pf-avt{width:76px!important;height:76px!important;font-size:21px!important}
  .pf-kunye-ic h1{font-size:24px}
  /* Anlatım ve rozetler iki sütunu da kaplıyor: fotoğrafın yanında
     kalınca satır başına üç kelime düşüyordu. Sarmalayıcı
     `display:contents` ile kalkıyor, çocukları doğrudan künye
     ızgarasına giriyor: ad fotoğrafın yanında kalıyor, gerisi altına
     tam genişlikte iniyor. */
  .pf-kunye-ic{display:contents}
  /* Yalnızca ad fotoğrafın yanında; şehir satırı, anlatım ve rozetler
     altına tam genişlikte iniyor. Şehir satırı da ikinci sütunda
     bırakılınca fotoğrafın altındaki boşluk kadar sağa kayıyordu. */
  .pf-kunye-ic h1{grid-column:2}
  .pf-kunye-sat,.pf-v2 .pf-manset,.pf-kat-rozetler{grid-column:1 / -1}
  .pf-v2 .pf-manset{-webkit-line-clamp:4}
  .pf-paylas{right:14px;top:14px}
  .pf-sek{flex:1 1 100%;box-shadow:0 1px 0 var(--pf-line)}
  .pf-kat-yazi h2{font-size:22px}
  .pf-isler{grid-template-columns:1fr}
  .pf-v2 .pf-yan{grid-template-columns:1fr}
}

/* ============================================================
   İLAN DETAY — "A · Sade ve kurumsal"
   Solda içerik (~%66), sağda yapışkan ücret ve iletişim kartı (~%34).
   Mobilde tek sütun; ücret ve Başvur ekranın altında sabit çubukta.
   Mavi yalnız eylem ve bilgi hiyerarşisi için; her küçük satır ayrı
   karta çevrilmiyor, ince sınır ve çok hafif gölge yetiyor.
   ============================================================ */
.ilan-duzen{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:28px;align-items:start;
  margin:18px 0 52px}
.ilan-ana{min-width:0}

.ilan-hero{display:flex;gap:16px;align-items:flex-start;padding:22px 0 18px}
.ilan-hero .avt{flex:0 0 auto;width:64px;height:64px;border-radius:14px;display:grid;
  place-items:center;color:#fff;font:700 20px/1 var(--display);letter-spacing:.02em}
.ilan-hero-in{min-width:0}
.ilan-isveren{font-size:13.5px;color:var(--muted);margin:0 0 4px}
.ilan-isveren a{color:var(--muted);text-decoration:none}
.ilan-isveren a:hover{color:var(--ink);text-decoration:underline}
.ilan-hero h1{font:700 clamp(28px,3.4vw,44px)/1.14 var(--display);letter-spacing:-.03em;
  color:var(--ink);margin:0 0 12px;max-width:22ch}
.ilan-rozet{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.ilan-rozet-ana{background:#EAF0FE;color:#1744BD;border-radius:8px;padding:6px 12px;
  font-size:13px;font-weight:650}
.ilan-rozet-alt{background:var(--paper-2);color:var(--ink-2);border-radius:8px;padding:6px 12px;
  font-size:13px}

/* Üst bilgi şeridi: tek kutu, hücreler eşit; boş hücre hiç çizilmiyor. */
.ilan-seritd{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:0;border:1px solid #D8DFEB;border-radius:14px;background:#F7F9FD;overflow:hidden}
.ilan-seritd>div{padding:16px 18px;border-left:1px solid #E4EAF4}
.ilan-seritd>div:first-child{border-left:0}
.ilan-seritd small{display:block;font-size:12px;color:var(--muted);margin-bottom:4px}
.ilan-seritd b{font-size:14.5px;color:var(--ink);font-weight:650}

.ilan-bolum{padding:26px 0 0}
.ilan-bolum+.ilan-bolum{border-top:1px solid var(--line-soft);margin-top:26px}
.ilan-bolum h2{font:700 19px/1.3 var(--display);color:var(--ink);margin:0 0 10px}
.ilan-bolum p{color:var(--ink-2);line-height:1.62;max-width:72ch;margin:0 0 10px}
.ilan-bolum ul{margin:0 0 10px;padding-left:20px;color:var(--ink-2);line-height:1.62;max-width:72ch}
.ilan-bolum li{margin-bottom:6px}
.ilan-cevaplar{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.ilan-cevaplar>div{border:1px solid #E4EAF4;border-radius:12px;padding:12px 14px;background:var(--card)}
.ilan-cevaplar small{display:block;font-size:12px;color:var(--muted);margin-bottom:3px}
.ilan-cevaplar b{font-size:14px;color:var(--ink);font-weight:600}

/* Sağ sütun. Sticky üst boşluğu site başlığını hesaba katıyor. */
.ilan-yan{position:sticky;top:96px;display:grid;gap:14px;min-width:0}
.ilan-kart{border:1px solid #D8DFEB;border-radius:14px;background:var(--card);padding:20px;
  box-shadow:0 1px 2px rgba(16,33,61,.04)}
.ilan-ucret>small{display:block;font-size:13px;color:var(--muted);margin-bottom:2px}
.ilan-fiyat{display:block;font:700 clamp(26px,2.4vw,34px)/1.15 var(--display);
  letter-spacing:-.03em;color:#2457E6;margin-bottom:14px}
.ilan-kart-satir{display:grid;grid-template-columns:1fr 1fr;gap:12px;
  padding:14px 0;margin-bottom:14px;border-top:1px solid #E4EAF4;border-bottom:1px solid #E4EAF4}
.ilan-kart-satir small{display:block;font-size:12px;color:var(--muted);margin-bottom:3px}
.ilan-kart-satir b{font-size:14px;color:var(--ink);font-weight:650}
.ilan-cta{width:100%;justify-content:center;min-height:48px;font-size:15px}
.applycard-state{border:1px solid #E4EAF4;border-radius:10px;background:var(--paper-2);
  padding:12px 14px;font-size:13.5px;color:var(--ink-2);line-height:1.5}

.ilan-iletisim h3{font:700 15px/1.3 var(--display);color:var(--ink);margin:0 0 2px}
.ilan-ilet-kim{font-size:13px;color:var(--muted);margin:0 0 12px}
/* Üç yazışma kanalı, üçü de aynı ölçüde. E-posta ve uygulama içi
   mesaj marka mavisi outline; WhatsApp kendi yeşiliyle dolu, çünkü
   kullanıcı onu renginden tanıyor. Telefonla arama düğmesi yok. */
.ilan-ilet{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  min-height:44px;padding:0 14px;border:1px solid #C7D6F5;border-radius:10px;
  background:var(--card);color:#2457E6;font-size:14px;font-weight:600;font-family:inherit;
  text-decoration:none;margin-top:8px;cursor:pointer;
  transition:background .16s,border-color .16s}
.ilan-ilet:hover{background:#F2F6FF;border-color:#2457E6}
.ilan-ilet svg{width:17px;height:17px;flex:0 0 auto}
.ilan-ilet-wa{background:#25D366;border-color:#25D366;color:#fff}
.ilan-ilet-wa:hover{background:#1FB855;border-color:#1FB855}
.ilan-ilet-not{font-size:12px;color:var(--muted);line-height:1.5;margin:10px 0 0}

/* ------------------------------------------------------------
   "Bu işe uygun kişiler"

   Bu bölüm site genelindeki ızgara kartını kullanıyordu: üst yarısı
   mor degrade, ortasında iri baş harfler. Sayfanın geri kalanı sade
   ve kurumsal düzene geçince kartlar ayrı bir görsel dil olarak
   kalmıştı. Aynı çerçeve, aynı köşe yarıçapı, aynı mavi burada da
   kullanılıyor; degradenin kapladığı yer metne bırakıldı.
   ------------------------------------------------------------ */
.ilan-kisiler{border-top:1px solid var(--line-soft);padding-top:28px;margin-bottom:52px}
.ilan-kisiler-bas{display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;margin-bottom:16px}
.ilan-kisiler-bas h2{font:700 19px/1.3 var(--display);color:var(--ink);margin:0}
.ilan-kisiler-bas a{font-size:13.5px;color:#2457E6;text-decoration:none;white-space:nowrap}
.ilan-kisiler-bas a:hover{text-decoration:underline}

.ikisi-izgara{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:14px}

.ikisi{position:relative;display:flex;flex-direction:column;border:1px solid #D8DFEB;
  border-radius:14px;background:var(--card);padding:16px;
  box-shadow:0 1px 2px rgba(16,33,61,.04);transition:border-color .16s,box-shadow .16s}
.ikisi:hover{border-color:#C7D6F5;box-shadow:0 4px 14px rgba(16,33,61,.07)}

.ikisi-ust{display:flex;align-items:flex-start;gap:11px;margin-bottom:11px}
.ikisi-avt{flex:0 0 auto;width:40px;height:40px;border-radius:11px;overflow:hidden;
  display:grid;place-items:center;color:#fff;font:700 14px/1 var(--display);letter-spacing:.02em}
.ikisi-avt img{width:100%;height:100%;object-fit:cover;display:block}
.ikisi-kim{min-width:0;flex:1}
/* Ad bağlantısı kartın tamamını kaplıyor; mesaj düğmesi onun üstünde
   duruyor ki kart içinde bağlantı içinde düğme olmasın. */
.ikisi-ad{display:block;font-size:14.5px;font-weight:650;color:var(--ink);text-decoration:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ikisi-ad::after{content:'';position:absolute;inset:0;border-radius:14px}
.ikisi:hover .ikisi-ad{color:#2457E6}
.ikisi-kim small{display:block;font-size:12.5px;color:var(--muted);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ikisi-msj{position:relative;z-index:1;flex:0 0 auto;width:32px;height:32px;display:grid;
  place-items:center;border:1px solid #D8DFEB;border-radius:9px;background:var(--card);
  color:var(--ink-2);cursor:pointer;transition:background .16s,border-color .16s,color .16s}
.ikisi-msj:hover{background:#F2F6FF;border-color:#2457E6;color:#2457E6}
.ikisi-msj svg{width:16px;height:16px}

/* Kişinin kendi anlatımı. İki satır yer ayrılıyor: tek satırlık
   anlatım yan kartların alt bilgilerini yukarı çekmesin. */
.ikisi-metin{font-size:13px;line-height:1.5;color:var(--ink-2);margin:0 0 9px;min-height:3em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ikisi-meta{font-size:12.5px;color:var(--muted);margin:0 0 12px}

.ikisi-alt{margin-top:auto;display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding-top:12px;border-top:1px solid #E4EAF4}
.ikisi-ucret{font:700 16px/1.15 var(--display);letter-spacing:-.02em;color:#2457E6}
.ikisi-ucret small{font-size:11.5px;font-weight:500;color:var(--muted);margin-left:2px}
.ikisi-gor{position:relative;z-index:1;display:inline-flex;align-items:center;min-height:32px;
  padding:0 12px;border:1px solid #C7D6F5;border-radius:9px;color:#2457E6;font-size:13px;
  font-weight:600;text-decoration:none;transition:background .16s,border-color .16s}
.ikisi-gor:hover{background:#F2F6FF;border-color:#2457E6}

@media(max-width:560px){
  .ikisi-izgara{grid-template-columns:1fr}
  .ilan-kisiler{padding-top:22px}
}

/* Mobil alt çubuk — masaüstünde gizli. */
.ilan-mobil-bar{display:none}

@media(max-width:980px){
  .ilan-duzen{grid-template-columns:1fr;gap:20px}
  .ilan-yan{position:static;top:auto}
  .ilan-hero{padding:16px 0 14px}
  .ilan-hero .avt{width:52px;height:52px;font-size:17px}
  .ilan-hero h1{font-size:clamp(24px,6vw,32px);max-width:none}
  .ilan-mobil-bar{display:flex;align-items:center;gap:12px;position:fixed;left:0;right:0;bottom:0;
    z-index:40;background:var(--card);border-top:1px solid #D8DFEB;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    box-shadow:0 -4px 16px rgba(16,33,61,.08)}
  .ilan-mobil-fiyat{font:700 17px/1.2 var(--display);color:#2457E6;white-space:nowrap}
  .ilan-mobil-bar .btn{margin-left:auto;min-height:44px;padding:0 22px}
  /* Sabit çubuk son içeriği kapatmasın. */
  .ilan-duzen{margin-bottom:96px}
}
@media(prefers-reduced-motion:reduce){
  .ilan-ilet{transition:none}
}