@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600&display=swap');
@import url('font-awesome.min.css');
html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    min-height:100%;
}
label,
p {
    margin: 0;
    font-weight:normal
}

button,
input,
select,
textarea {
    background: 0 0;
    border: none;
    outline: 0;
    border-radius: 0;
    -webkit-appearance: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    padding: 0
}

textarea{
    vertical-align:middle;
}

ul {
    padding: 0;
    margin: 0
}
li{
    list-style:none;
}

dl,
ol,
ul {
    margin-bottom: 0
}
.htmlFixed{
    overflow:hidden
}

a,
a:active,
a:focus,
a:hover,
a:link,
a:visited {
    text-decoration: none;
    outline: 0
}

:root {
    font-size: 10px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Hiçbir link altı çizgili olmasın (kullanıcı isteği — tüm sayfalar). */
a { text-decoration: none; }
a:hover { text-decoration: none; }

body {
    font-family: "Open Sans", Arial, sans-serif;
    min-height: 100vh;
    background-color: #fafafa;
    color: #262626;
    padding-bottom: 3rem;
}

img {
    display: block;
}

.container {
    width: 935px;
	max-width:100%;
    margin: 0 auto;
    padding: 0 2rem;
}

.btn {
    display: inline-block;
    font: inherit;
    background: none;
    border: none;
    color: inherit;
    padding: 0;
    cursor: pointer;
}

.btn:focus {
    outline: 0.5rem auto #4d90fe;
}

.visually-hidden {
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
}

/* Profile Section */

.profile {
    padding: 5rem 0;
}

.profile::after {
    content: "";
    display: block;
    clear: both;
}

.profile-image {
    float: left;
    width: calc(33.333% - 1rem);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 3rem;
}

.profile-image img {
    border-radius: 50%;
}

.profile-user-settings,
.profile-stats,
.profile-bio {
    float: left;
    width: calc(66.666% - 2rem);
}
.profile-stats ul{
	margin-bottom:30px
}
.profile-real-name{
	display:block
}

.profile-user-settings {
    margin-top: 1.1rem;
}

.profile-user-name {
    display: inline-block;
    font-size: 3.2rem;
    font-weight: 300;
    grid-column: 1 / -1;   /* mobil grid'de ad tam satır → dönem etiketi altına iner */
}

/* Ay sayfasında profil adının ALTINDAKİ dönem etiketi (ör. "Haziran 2026").
   Mobilde .profile-user-settings GRID (auto 1fr) olduğundan etiket ada yan gelmesin diye tam satır
   (grid-column) + flex durumları için flex-basis; masaüstünde block zaten alt satırda. */
.profile-period-label {
    display: block;
    grid-column: 1 / -1;
    flex-basis: 100%;
    width: 100%;
    margin-top: 0.4rem;
    color: #8e8e8e;
    font-size: 1.6rem;
}

.profile-edit-btn {
    font-size: 1.4rem;
    line-height: 1.8;
    border: 0.1rem solid #dbdbdb;
    border-radius: 0.3rem;
    padding: 0 2.4rem;
    margin-left: 2rem;
}

.profile-settings-btn {
    font-size: 2rem;
    margin-left: 1rem;
}

.profile-stats {
    margin-top: 2.3rem;
}

.profile-stats li {
    display: inline-block;
    font-size: 1.6rem;
    line-height: 1.5;
    margin-right: 4rem;
    cursor: pointer;
}

.profile-stats li:last-of-type {
    margin-right: 0;
}

.profile-bio {
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.5;
    margin-top: 2.3rem;
}

.profile-real-name,
.profile-stat-count,
.profile-edit-btn {
    font-weight: 600;
}

/* Gallery Section */

/* Galeri: CSS GRID (float+negatif-margin yerine). repeat(3,1fr)+gap KONTEYNERİ ASLA aşmaz —
   mobilde de tam sığar (float+negatif-margin yaklaşımı yatay taşma/kırpmaya yol açıyordu).
   Öğeler <div> ya da <figure> (schema.org) olabilir; grid ikisini de hücre yapar. */
.gallery{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin: 0;
}
.gallery > div, .gallery > figure{
	margin: 0;
	padding: 0;
	min-width: 0;      /* grid hücresinin içeriğe göre taşmasını engelle */
}

.gallery-item {
    position: relative;
    color: #fff;
    cursor: pointer;
}

.gallery-item:hover .gallery-item-info,
.gallery-item:focus .gallery-item-info {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    left: 0;
    right: 0;
}

.gallery-item-info {
    display: none;
}

.gallery-item-info li {
    display: inline-block;
    font-size: 1.7rem;
    font-weight: 600;
}

.gallery-item-likes {
    margin-right: 2.2rem;
}

.gallery-item-type {
    position: absolute;
    top: 10px;
    right: 19px;
    font-size: 2.5rem;
    text-shadow: 0.2rem 0.2rem 0.2rem rgba(0, 0, 0, 0.1);
}

.fa-clone,
.fa-comment {
    transform: rotateY(180deg);
}

/* NOT: .gallery-image'ın tek yetkili tanımı aşağıda (~843, 4:5 dikey). Buradaki eski height:360px
   kuralı ölüydü (sonraki tanım eziyordu) — kaldırıldı (Kontrol Turu 2, H17). */

/* Loader */

.loader {
    width: 5rem;
    height: 5rem;
    border: 0.6rem solid #999;
    border-bottom-color: transparent;
    border-radius: 50%;
    margin: 0 auto;
    animation: loader 500ms linear infinite;
}

/* Media Query */

@media screen and (max-width: 40rem) {
    .profile {
        display: flex;
        flex-wrap: wrap;
        padding: 4rem 0;
    }

    .profile::after {
        display: none;
    }

    .profile-image,
    .profile-user-settings,
    .profile-bio,
    .profile-stats {
        float: none;
        width: auto;
    }

    .profile-image img {
        width: 7.7rem;
    }

    .profile-user-settings {
        flex-basis: calc(100% - 10.7rem);
        display: flex;
        flex-wrap: wrap;
        margin-top: 1rem;
    }

    .profile-user-name {
        font-size: 2.2rem;
        flex-basis: 100%;   /* mobil flex'te ad tam satır → dönem etiketi (period-label) altına iner */
    }

    .profile-edit-btn {
        order: 1;
        padding: 0;
        text-align: center;
        margin-top: 1rem;
    }

    .profile-edit-btn {
        margin-left: 0;
    }

    .profile-bio {
        font-size: 1.4rem;
        margin-top: 1.5rem;
    }

    .profile-edit-btn,
    .profile-bio,
    .profile-stats {
        flex-basis: 100%;
    }

    .profile-stats {
        order: 1;
        margin-top: 1.5rem;
    }

    .profile-stats ul {
        display: flex;
        text-align: center;
        padding: 1.2rem 0;
        border-top: 0.1rem solid #dadada;
        border-bottom: 0.1rem solid #dadada;
    }

    .profile-stats li {
        font-size: 1.4rem;
        flex: 1;
        margin: 0;
    }

    .profile-stat-count {
        display: block;
    }
}

/* Spinner Animation */

@keyframes loader {
    to {
        transform: rotate(360deg);
    }
}

/*

The following code will only run if your browser supports CSS grid.

Remove or comment-out the code block below to see how the browser will fall-back to flexbox & floated styling. 

*/

@supports (display: grid) {
    .profile {
        display: grid;
        grid-template-columns: 1fr 2fr;
        grid-template-rows: repeat(3, auto);
        grid-column-gap: 3rem;
        align-items: center;
    }

    .profile-image {
        grid-row: 1 / -1;
    }

    .gallery {
    }

    .profile-image, .profile-user-settings, .profile-stats, .profile-bio, .gallery-item {
        width: auto;
        margin: 0;
    }

    @media (max-width: 40rem) {
        .profile {
            grid-template-columns: auto 1fr;
            grid-row-gap: 1.5rem;
        }

        .profile-image {
            grid-row: 1 / 2;
        }

        .profile-user-settings {
            display: grid;
            grid-template-columns: auto 1fr;
            grid-gap: 1rem;
        }

        .profile-edit-btn,
        .profile-stats,
        .profile-bio {
            grid-column: 1 / -1;
        }

        .profile-user-settings,
        .profile-edit-btn,
        .profile-settings-btn,
        .profile-bio,
        .profile-stats {
            margin: 0;
        }
    }
}
.profile-user-name{
	max-width:300px;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	vertical-align: middle;
}
.post_modal{
	position:fixed;
	left:0;
	top:0;
	width:100%;
	height:100%;
	z-index:99999;
	padding:0 30px;
	align-items:center;
	justify-content:center;
	display:none;
}
.post_modal.post_modal_act{
	display:flex;
}
.post_bg{
	position:absolute;
	left:0;
	top:0;
	bottom:0;
	right:0;
	background:rgba(0,0,0,.65)
}
.post_modal_content{
	position:relative;
	z-index:2;
	/* FLEX (eski: table). Tablo düzeninde sütun genişlikleri içerikten bağımsız
	   hesaplanıyordu; flex'te görsel kendi doğal genişliğini dayatır, metin paneli ona uyar.
	   height SABİT DEĞİL: yükseklik görselin kendi oranından doğsun ki alta/üste
	   doldurma alanı oluşmasın. */
	display:flex;
	align-items:stretch;
	max-width: 95%;
	max-height: 95vh;
}
.post_modal_content > div{
	display:block;
}
.post_modal_content > div.pmc_image{
	/* Arka plan YOK: kutu görselin kendisi kadar olduğu için doldurulacak alan da yok.
	   (Eskiden #000 idi ve 4:5 görselde sağ/sol siyah bant olarak görünüyordu.) */
	background: transparent;
	overflow: hidden;
	position: relative;
	/* 0 1 auto: doğal genişliğinde durur ama gerekirse DARALIR. Daralma izni olmazsa
	   geniş (yatay) görsellerde görsel + 500px metin paneli ekranı aşıyor ve panel
	   ekran dışında kalıyordu. min-width:0 flex öğesinin içerik genişliğinin altına
	   inebilmesi için ŞART. */
	flex: 0 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.pmc_image img{
	max-height: 95vh;
	max-width: 100%;
}
.pmc_image video{
	max-height: 95vh;
	width: auto;
	max-width: 100%;
}
.pmc_content{
	background:#fff;
	width:500px;
	flex: 0 0 500px;   /* flex düzeninde sabit genişlik (daralıp metni sıkıştırmasın) */
	position: relative;
	z-index: 2;
}
/* Uzun/kesintisiz caption veya hashtag modalı yatay taşırmasın (kelime kırma). */
.pmc_content p,
.pmc_content span,
.pmc_content .badge{
	overflow-wrap: anywhere;
	word-break: break-word;
}
.pmc_top{
	border-bottom:1px solid #efefef;
	padding:14px 4px 14px 16px;
	display:inline-block;
	vertical-align:middle;
	width:100%;
}
.pmc_plogo{
	border-radius:50%;
	width:32px;
	float:left;
}
.pmc_plogo img{
	height:32px;
	height:32px;
	object-fit:cover;
	border-radius:50%;
}
.pmc_top > span{
	line-height:32px;
	float:left;
	font-size:14px;
	font-weight:600;
	margin-left:14px;
}
.pmc_top > span span{
	background:url(../img/32f0a4f27407.png);
	background-repeat: no-repeat;
	background-position: -244px -369px;
	height: 12px;
	width: 12px;
	display: inline-block;
	vertical-align: middle;
}
.pmc_inner{
	padding:16px 16px 16px 52px;
	position:absolute;
	left:0;
	top:61px;
	bottom:111px;
	overflow-y:auto;
}
.pmc_inner .pmc_plogo{
	position:absolute;
	left:16px;
	top:16px;
}
.pmc_inner .pmc_top{
	padding:0;
	border:none
}
.pmc_inner .pmc_top > span{
	width:100%;
	line-height: normal;
	position: relative;
	top: 6px;
	line-height: 20px;
}
/* ===== Paylaşım açıklaması (caption) =====
   Editörde yazılan biçim public tarafta AYNEN korunur: paragraflar, satır sonları,
   kalın/italik, listeler. Önceden strip_tags ile düzleştirildiği için Enter ile
   ayrılan paragraflar tek satıra yapışıyordu. */
.pmc_caption{
	font-weight:400;
	margin-top:4px;
	white-space:normal;
	word-break:break-word;
}
.pmc_caption p{ margin:0 0 .75em; }
.pmc_caption p:last-child{ margin-bottom:0; }
/* Editörde arka arkaya Enter'a basılınca oluşan boş paragraf görünür boşluk bırakmalı. */
.pmc_caption p:empty::after{ content:""; display:block; height:.75em; }
.pmc_caption ul,
.pmc_caption ol{ margin:0 0 .75em; padding-left:1.4em; }
.pmc_caption li{ margin-bottom:.25em; }
.pmc_caption blockquote{
	margin:0 0 .75em;
	padding-left:.8em;
	border-left:3px solid #dbdbdb;
	color:#555;
}
.pmc_caption h2,
.pmc_caption h3,
.pmc_caption h4{ font-size:15px; font-weight:600; margin:0 0 .5em; }
.pmc_caption a{ color:inherit; text-decoration:underline; }
/* ÖNEMLİ: yukarıdaki ".pmc_top > span span" kuralı iç içe span'lere sprite arka planı
   basıyor. Editör <span> üretebildiği için caption içindekileri bundan muaf tutuyoruz. */
.pmc_caption span{
	background:none !important;
	height:auto;
	width:auto;
	display:inline;
	vertical-align:baseline;
}
.pmc_inner .pmc_top > span u{
	text-decoration:none;
	font-size:12px;
	color:#8e8e8e;
	font-weight:400;
	display:block;
	margin-top:16px
}
.pmc_actions{
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	border-top:1px solid #efefef;
	padding:16px;
}
.pmc_actions ul{
	display:flex;
	align-items:center;
	gap:16px;
	width:100%;
}
.pmc_actions ul li{
	display:flex;
	align-items:center;
}
/* İndir + Kopyala sağda YAN YANA (İndir = sondan ikinci öğe); diğer aksiyonlar solda. */
.pmc_actions ul li:nth-last-child(2){
	margin-left:auto;
}
/* Tüm aksiyon ikonları AYNI BOYUT (24px): SVG'ler zaten 24, Font Awesome (indir/kopyala) da 24'e. */
.pmc_actions ul li button,
.pmc_actions ul li a{
	display:inline-flex;
	align-items:center;
	line-height:0;
	padding:0;
}
.pmc_actions ul li .fa{
	font-size:24px;
	line-height:1;
	width:24px;
	text-align:center;
}
.pmc_actions ul li img{
	height:24px;
	width:auto;
}
.pmc_actions h4{
	color:#262626;
	margin:12px 0 0;
	font-size:14px;
	font-weight:600
}
.pmc_actions h4 span{
	letter-spacing: .2px;
	color:#8e8e8e;
	font-size:10px;
	margin-top:6px;
	display:block
}
.mobileCloser{
	background:#fff;
	text-align:center;
	color:#262626;
	font-size: 16px;
	padding: 16px 16px;
	font-weight:600;
	position:relative;
	display:none;
}
.mobileCloser svg{
	position:absolute;
	left:16px;
	top:50%;
	transform:translateY(-50%) rotate(-90deg);
}
.post_modal > button.post_closer{
	position:absolute;
	right:18px;
	top:18px;
	z-index: 2;
	background:none;
	border:0;
	padding:0;
	cursor:pointer;
	line-height:0;
}
.pmc_image .swiper-container{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}
.pmc_image .swiper-container .swiper-slide{
	display:flex;
	align-items:center;
}
.multiplePost > button.coreSpriteLeftChevron {
    background-position: -130px -98px;
	left:15px;
}
.multiplePost > button.coreSpriteRightChevron {
    background-position: -162px -98px;
	right:15px;
}
.multiplePost > button{
	cursor:pointer;
	position:absolute;
	z-index:2;
	top:50%;
	transform:translateY(-50%);
	background:url(../img/32f0a4f27407.png);
	background-repeat: no-repeat;
	height: 30px;
    width: 30px;
}
.multiplePost > button.swiper-button-disabled{
	display:none
}
.multiplePost .swiper-pagination{
	position:absolute;
	bottom:15px;
	width:100%;
	text-align:center;
	z-index:2
}
.multiplePost .swiper-pagination-bullet{
	width:6px;
	height:6px;
	background:#fff;
	margin:0 2px;
}
.coreSpriteVerifiedBadge {
    height: 18px;
    width: 18px;
    background:url(../img/32f0a4f27407.png);
    display: inline-block;
    vertical-align: middle;
    position: relative;
    background-position: 0 -369px;
}
@media(max-width:992px){
	.pmc_content{
		width:350px
	}
}
@media(max-width:768px){
	body{
		margin:0
	}
	.gallery{
		gap: 2px;
	}
	.container{
		padding:0 15px;
	}
	.profile-stats ul{
		margin: 0;            /* negatif margin kaldırıldı — mobilde 'takip' sütununu ekran dışına itiyordu */
		border-bottom:none;
	}
	.profile-stats li{
		min-width: 0;         /* flex öğesi içeriğe göre daralabilsin (taşma önlenir) */
	}
	main .container{
		padding:0
	}
	.profile{
		padding-bottom:0
	}
	.btn.profile-settings-btn{
		display:none;
	}
	.pmc_image video{
		width:100%;
		height:auto
	}
	.post_modal > button.post_closer{
		display:none
	}
	/* Mobilde görsel ekran genişliğini kaplar, yüksekliği ORANINDAN doğar —
	   böylece burada da alt/üst doldurma alanı oluşmaz. */
	.pmc_image img{
		width:100%;
		height:auto;
		max-height: none;
		max-width: 100%;
	}
	.post_modal_content{
		width:100%;
		display:block;
		max-width: none;
		max-height: none;
	}
	.post_modal_content > div.pmc_image{
		max-height: none;
	}
	.pmc_content{
		flex: none;   /* mobilde blok düzen — sabit genişlik kısıtı kalksın */
	}
	.mobileCloser{
		display:block
	}
	.post_modal_content > div{
		display:block;
		width:100%;
	}
	.post_modal{
		padding:0;
		overflow-y: auto;
		background: #fff;
	}
	.post_modal.post_modal_act{
		display:block;
	}
	.pmc_image{
		min-height:auto;
		max-width:none
	}
	.pmc_actions{
		position:static;
	}
	.pmc_inner{
		position:relative;
		top: 0;
	}
	.post_bg{
		display:none
	}
	.pmc_content > .pmc_top{
		display:none
	}
	.profile-user-name{
		max-width:180px;
	}
	.gallery-item-info{
		display:none !important
	}
}
/* ============================================================
   Instagram standartlarına uygun sabit boyutlar
   - Profil logosu: 175×175 yuvarlak (IG profile resmi)
   - Küçük profil logosu (post modal header): 32×32 yuvarlak
   - Post görseli/videosu: 1:1 sabit kare, içerik kırpılarak sığar
   - Galeri thumb: 1:1 sabit kare
   ============================================================ */
.profile-image {
    width: 175px !important;
    height: 175px !important;
    flex: 0 0 175px;
    margin-right: 3rem;
    overflow: hidden;
    border-radius: 50%;
    background: #f5f5f5;
}
.profile-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
    display: block;
}
@media (max-width: 760px) {
    .profile-image {
        width: 110px !important;
        height: 110px !important;
        flex: 0 0 110px;
        margin-right: 1.5rem;
    }
}

/* ===== Post modal (lightbox) — görsel KENDİ ölçüsünde =====
   Kullanıcı kararı: görselin sağına/soluna/üstüne/altına hiçbir doldurma alanı eklenmesin.
   Bu yüzden BURADA `aspect-ratio` ve sabit bir kutu YOKTUR.
   Önceki hâli `aspect-ratio: 1/1` ile kutuyu kareye zorluyor, artan yeri `background:#000`
   ile dolduruyordu; 4:5 dikey gönderilerde bu sağ/sol siyah bant olarak görünüyordu.
   Şimdi kutu görselin doğal oranını alır; kırpma da yoktur, doldurma da. */
.post_modal_content > div.pmc_image {
    max-height: 95vh;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.pmc_image img,
.pmc_image video {
    /* Doğal boyut: yalnız ekrana sığmak için sınırlanır, ASLA gerilmez/kırpılmaz.
       object-fit burada etkisizdir (kutu = görsel) ama tarayıcı farkına karşı güvenlik ağı. */
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 95vh;
    object-fit: contain;
    display: block;
}

/* Carousel: swiper kapsayıcısı mutlak konumlu olduğu için kutu ölçüsünü, altındaki
   görünmez ilk görsel (spacer) belirler. Slaytlar o kutunun içine ortalanır. */
.pmc_image .swiper-container .swiper-slide{
    justify-content: center;
}
.pmc_image .swiper-slide img{
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

/* Küçük logo (post header) */
.pmc_plogo {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 50%;
    overflow: hidden;
    background: #f5f5f5;
}
.pmc_plogo img {
    width: 32px;
    height: 32px;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
    display: block;
}

/* Galeri thumb: 4:5 dikey (modern Instagram grid oranı; içerik de ağırlıkla 1080x1350=4:5).
   Kare (1:1) DEĞİL — 4:5 portre, tek tip yükseklikle temiz 3'lü grid sağlar. */
.gallery-image {
    width: 100%;
    aspect-ratio: 4 / 5;
    height: auto;
    object-fit: cover;
    object-position: center;
    background: #f5f5f5;
}

/* ===== Post modal — mobil =====
   Bu blok dosyanın SONUNDA olmalı: yukarıdaki genel modal kuralları aynı özgüllükte
   olduğu için, daha erken bir @media içinde yazılsaydı onlar tarafından ezilirdi. */
@media (max-width: 768px) {
    /* Görsel ekran genişliğini kaplar, yüksekliği kendi oranından doğar —
       ne sağ/sol ne alt/üst doldurma alanı oluşur. */
    .post_modal_content > div.pmc_image{
        max-height: none;
        display: block;
    }
    .pmc_image img{
        width: 100%;
        height: auto;
        max-width: 100%;
        max-height: none;
    }
    .pmc_image video{
        width: 100%;
        height: auto;
        max-height: none;
    }

    /* Yatay taşma düzeltmesi (eskiden beri vardı): .pmc_inner yalnız `left:0` ile
       mutlak konumlanıp genişliğini içeriğine göre alıyordu; uzun caption satırları
       kutuyu ekranın dışına taşırıp metni kesiyordu. `right:0` ile sınırlanır. */
    .pmc_content{
        flex: none;
        width: 100%;
        max-width: 100%;
    }
    .pmc_inner{
        right: 0;
        left: 0;
        width: auto;
    }
    .post_modal{
        overflow-x: hidden;
    }
}